Question

我想知道我是否可以将自定义SVG作为d3.js的背景而不是声明一个新的？

因此，在开始生成图表之前，不要声明新的SVG：

var svg = d3.selectAll('#my_div')
            .append("svg")
            .attr("width", 400)
            .attr("height", 400)
            .append("g");

我可以改为添加自定义svg。例如this？

我意识到我可以通过将图像附加到我的新svg来绕过它，但我想知道我是否可以覆盖它？

Answer 1

我猜你可以用你想要的背景在HTML中硬编码SVG，然后在D3中选择那个svg ......

d3.select("#my_div svg")
    // do stuff

Answer 2

要绘制现有的SVG，只需选择它：

var svg = d3.select("svg");

并使用该选择来绘制元素。

这是一个演示，现有的SVG是明星，圆圈是由D3代码添加的：

＆＃13;

var svg = d3.select("svg");

var circles = svg.selectAll("foo")
	.data(d3.range(6))
	.enter()
	.append("circle")
	.attr("cy", 100)
	.attr("cx", (d,i)=>i*30 + 20)
	.attr("r", 12)
	.attr("fill", "orangered")
        .attr("stroke", "black");

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

＆＃13;

D3.js自定义SVG作为背景

2 个答案: