0
我正在嘗試使用D3.js修改大多數改編/從http://bl.ocks.org/mbostock/4348373複製的旭日圖。我正在嘗試向這些弧線添加一些文字（如：https://www.jasondavies.com/coffee-wheel/）。如何，文本不會是可見的。我正在嘗試使用文本路徑。我已經試過：用文字渲染D3.js陽光圖
- 設置弧爲零的不透明度，公正，以確保該文本不是隱藏在某種程度上
- 渲染弧線，而不是文字，也不會呈現任何
下面是結果：
<svg height="700" width="960"><g transform="translate(480, 350)">
<path style="stroke: rgb(255, 255, 255); fill: rgb(49, 130, 189);" d="M0,202.072594216369A202.072594216369,202.072594216369 0 1,1 0,-202.072594216369A202.072594216369,202.072594216369 0 1,1 0,202.072594216369Z" id="node_0" class="siv_node">
<title>Tooltip of this arc</title>
<text class="node_text">
<textPath xlink:href="#node_0">foobar</textPath>
</text>
</path>
<path style="stroke: rgb(255, 255, 255); fill: rgb(49, 130, 189);" d="M-5.249579602826461e-14,-285.7738033247041A285.7738033247041,285.7738033247041 0 0,1 -5.249579602826461e-14,-285.7738033247041L-3.712013335537173e-14,-202.072594216369A202.072594216369,202.072594216369 0 0,0 -3.712013335537173e-14,-202.072594216369Z" id="node_1" class="siv_node">
<title>Title of this arc</title>
<text class="node_text">
<textPath xlink:href="#node_1">foobar</textPath>
</text>
</path>
...
</svg>
下面是添加的文字部分：
var c = svg.selectAll("path")
.data(partition.nodes(opt.nodes)).enter()
.append("path")
.attr("class", "siv_node")
.attr("id", function(d, i) { return "node_"+i;});
[...]
c.append("text")
.attr("class", "node_text")
.append("textPath")
.attr("xlink:href", function(d, i) { return "#node_"+i; })
.text("foobar");
思我注意到：
- 調試時沒有空間保留給文本元素與檢查器中的元素（如爲路徑，見截圖）
- 我不知道這是怎麼回事（我是新來的D3.js和SVG ...）
下面是完整的代碼：
renderSunburst: function(opt) {
// Rendering sunburst diagramm. mostly adapted from:
// http://bl.ocks.org/mbostock/4063423 and
// http://bl.ocks.org/mbostock/4348373
var self = this;
opt = opt || {};
opt = this.makeSunburstOptionsValid(opt);
var stash = function(d) {
d.x0 = d.x;
d.dx0 = d.dx;
};
// Interpolate the arcs in data space.
var arcTween = function(a) {
var i = self.d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};
};
var radius = Math.min(opt.size.width, opt.size.height)/2;
var formatNumber = d3.format(",d");
var x = this.d3.scale.linear().range([0, 2 * Math.PI]);
var y = this.d3.scale.sqrt().range([0, radius]);
var color = this.d3.scale.category20c();
var partition = this.d3.layout.partition()
.value(function(d) { return d.size; });
var arc = this.d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
var svg = this.d3.select(opt.container).append("svg")
.attr("width", opt.size.width)
.attr("height", opt.size.height)
.append("g")
.attr("transform", "translate(" + opt.size.width/2 + ", " + opt.size.height/2 + ")");
var click = function(d) {
svg.transition()
.duration(opt.animation.duration )
.tween("scale", function() {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };
})
.selectAll("path")
.attrTween("d", function(d) { return function() { return arc(d); }; });
};
var c = svg.selectAll("path")
.data(partition.nodes(opt.nodes)).enter()
.append("path")
.attr("class", "siv_node")
.attr("id", function(d, i) { return "node_"+i;});
c.attr("d", arc)
.style("stroke", "#fff")
//.attr("fill-opacity", "0")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
;// .on("click", click);
c.append("title")
.text(function(d) { return d.name + "\n" + formatNumber(d.value); });
// svg.selectAll(".siv_node")
// .data(opt.nodes)
// .enter()
c.append("g").append("text")
.attr("class", "node_text")
.style("color", "green")
.style("fill", "black")
.attr("stroke", "black")
.append("textPath")
.attr("xlink:href", function(d, i) { return "#node_"+i; })
.text("foobar");