在D3圖表中的圓圈內插入文本
[英]Insert text inside Circle in D3 chart
問題描述
我想在我的Circle中插入一些文本，這是使用D3.js在氣泡圖中繪制的。
我可以根據提供給它的數據在svg中繪制圓圈，但在向其附加文本時遇到問題。
下面是我的代碼：
<script type="text/javascript">
var sampleData = [{"x": 8,"y": 1}, {"x": 2,"y": 1}, {"x": 4,"y": 1},{"x": 5,"y": 1}];
// {"x": 6,"y": 40}, {"x": 8,"y": 100}, {"x": 10,"y": 60}];
$(function() {
InitChart();
});
function InitChart() {
// Chart creation code goes here
var vis = d3.select("#svgVisualize");
var xRange = d3.scale.linear().range([40, 400]).domain([0,10]);
var yRange = d3.scale.linear().range([200, 40]).domain([0,2]);
/* var xRange = d3.scale.linear().range([40, 400]).domain([d3.min(sampleData, function(d) {
return (d.x);
}), d3.max(sampleData, function(d) {
return d.x;
})]);
var yRange = d3.scale.linear().range([400, 40]).domain([d3.min(sampleData, function(d) {
return d.y;
}), d3.max(sampleData, function(d) {
return d.y;
})]); */
var xAxis = d3.svg.axis().scale(xRange).ticks(2);
var yAxis = d3.svg.axis().scale(yRange).ticks(2).orient("left");
vis.append("svg:g").call(xAxis).attr("transform", "translate(0,200)");
vis.append("svg:g").call(yAxis).attr("transform", "translate(40,0)");
var circles = vis.selectAll("circle").data(sampleData);
circles
.enter()
.insert("circle")
.attr("cx", function(d) { return xRange (d.x); })
//.attr("cy", function(d) { return yRange (d.y); })
.attr("cy", function(d) { return yRange (d.y); })
.attr("r", function(d) { return Math.log(d.x) * 30; })
.attr("stroke","black")
.style("fill", "yellow");
var text = vis.selectAll("text")
.data(sampleData)
.enter()
.insert("text");
//Add SVG Text Element Attributes
var textLabels = text
.attr("x", function(d) { return d.cx; })
.attr("y", function(d) { return d.cy; })
.text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
}
</script>
<body>
<svg id="svgVisualize" width="500" height="250" style="border:1px solid Red;"></svg>
</body>
任何人都可以建議上面的代碼有什么問題？ 謝謝
2 個解決方案
解決方案1
3 已采納 2017-07-19 12:10:32
當你這樣做：
var text = vis.selectAll("text")
.data(sampleData)
.enter()
.insert("text");
您正在選擇該SVG中已存在的<text>元素（在您的情況下，軸的刻度）。 因此，您的“輸入”選擇為空。
解決方案：選擇不存在的內容，例如null ：
var text = vis.selectAll(null)
.data(sampleData)
.enter()
.insert("text");
這是更新的代碼：
var sampleData = [{ "x": 8, "y": 1 }, { "x": 2, "y": 1 }, { "x": 4, "y": 1 }, { "x": 5, "y": 1 }]; var vis = d3.select("svg"); var xRange = d3.scale.linear().range([40, 400]).domain([0, 10]); var yRange = d3.scale.linear().range([200, 40]).domain([0, 2]); var xAxis = d3.svg.axis().scale(xRange).ticks(2); var yAxis = d3.svg.axis().scale(yRange).ticks(2).orient("left"); vis.append("svg:g").call(xAxis).attr("transform", "translate(0,200)"); vis.append("svg:g").call(yAxis).attr("transform", "translate(40,0)"); var circles = vis.selectAll("circle").data(sampleData); circles .enter() .append("circle") .attr("cx", function(d) { return xRange(dx); }) //.attr("cy", function(d) { return yRange (dy); }) .attr("cy", function(d) { return yRange(dy); }) .attr("r", function(d) { return Math.log(dx) * 30; }) .attr("stroke", "black") .style("fill", "yellow"); var text = vis.selectAll(null) .data(sampleData) .enter() .append("text"); var textLabels = text .attr("x", function(d) { return xRange(dx); }) .attr("text-anchor", "middle") .attr("y", function(d) { return yRange(dy); }) .text(function(d) { return "( " + dx + ", " + dy + " )"; }) .attr("font-family", "sans-serif") .attr("font-size", "10px") .attr("fill", "red");
line, path{ fill: none; stroke: black; }
<script src="https://d3js.org/d3.v3.min.js"></script> <svg width="400" height="220"></svg>
PS：不要使用insert ，請改用append 。
解決方案2
0 2017-07-19 12:19:07
更好的方法是使用svg組，然后你可以將圓圈和文本放在一起：
var join = vis.selectAll(".points").data(sampleData);
var groups = join
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")"; });
.attr("cx", function(d) { return xRange (d.x); })
groups.append("circle")
.attr("r", function(d) { return Math.log(d.x) * 30; })
.attr("stroke","black")
.style("fill", "yellow");
groups.append("text")
.data(sampleData)
.text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
D3：如何在圓圈內設置文字
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.