如何在 svg D3 中添加附加顺序答案

【问题标题】：How to add order for appending in svg D3如何在 svg D3 中添加附加顺序
【发布时间】：2015-06-13 21:24:58
【问题描述】：

我正在使用 d3 图表。

var svg = container.append('svg')
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .on("click", hideDiv).append('g')
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    d3.select("svg").append("rect").attr("width", '100%').attr("height", '100%').attr("fill", "#FFFFFF");

这是我的代码。在图表中运行此代码时未绘制。但是在控制台中，当在 g 之前移动“rect”时，图表将绘制。在移动矩形之前的控制台中，代码将是

<svg width="2200" height="2690"><g transform="translate(120,20)">
<g class="node" transform="translate(180,1421.327880859375)"></g>3
<rect width="100%" height="100%" fill="#FFFFFF"></rect>

但是在move rect之后，

<svg width="2200" height="2690">
<rect width="100%" height="100%" fill="#FFFFFF"></rect>
<g transform="translate(120,20)"></g>

我想要这样。请帮我。我被这个困住了。

【问题讨论】：

您可以使用插入代替追加，最后使用选择器作为要插入之前的元素
@HuguesStefanski 我想要这样.. 如果发生图表，否则不会绘制。
尝试类似 d3.select("svg").insert("rect","g").attr("width", '100%').attr("height", ' 100%').attr("fill", "#FFFFFF");
@HuguesStefanski 它不起作用.. 我必须做什么
你可以设置一个 jsfiddle 或 plnkr 来简化这个过程吗？这样可以更轻松地检查您的代码

标签： jquery d3.js svg jquery-svg

【解决方案1】：

您的 D3 代码对我有用，您正在使用 #FFFFFF（白色）填充您的矩形，如果您没有填充容器，那么它将默认为白色并且矩形不会显示，请尝试使用不同的颜色同样适用于两个 svg 元素，如果您更改颜色，它们都会显示

还要注意，你已经创建了一个 svg 变量，所以你不需要再次选择它来追加矩形，直接追加：

svg.append("rect")...

这是一个有效的 jsfiddle 演示，矩形设置为黄色：

.attr("fill", "#FFFF00");

jsfiddle

【讨论】：

我是这样的
我更新了 jsfiddle 以包含 svg 元素，你有错别字，为什么在第一个。两个 SVG 元素在 jsfiddle 中都显示得很好，请看一下
我在运行我的代码时得到这个
两个