d3多个svg，每个svg有一行数据

我遇到了一个d3.js问题： 我试图用一条线绘制几个SVG画布（这是一个更复杂的自定义形状，但作为一个示例，这条线就足够了），其中线的长度（称为“d.uni”）由数据决定。所以，每一行数据都映射到它自己的SVG中的一行

我看了一些关于多SVG的例子，比如和，并采纳了这个想法，就我所知，它主要是将数据绑定到SVG绘图函数

这是我的密码：

     var w = 300;
     var h = 250;
     var stemL = 100;
     var length1 = 80;
     var angle1 = -1.2;

d3.csv("data_test.csv", function(data) {

//Create SVG element
var svg = d3.select("body")
       .selectAll("svg")
       .data(data)
       .enter()
       .append("svg")
       .attr("width", w)
       .attr("height", h)

// Cat 1         
svg.selectAll("uni")
   .data(data)
   .enter()
   .append("line")
   .attr("x1", w/2)
   .attr("y1", h - stemL)
   .attr("x2", function(d) {return w/2 + length1 * d.uni * Math.sin(angle1);})
   .attr("y2", function(d) {return (h - stemL) - length1 * d.uni * Math.cos(angle1); })
   .style("stroke", "steelblue")
   .style("stroke-width", 5);

});

因此，我得到了预期的3个SVG（请参见下面的data_test.csv），但d3将每个SVG中的每一行数据绘制在彼此的顶部，而不是SVG 1中的第1行、SVG 2中的第2行等等

我错过了什么？？：-/

非常感谢您的帮助

埃瓦

data_test.csv：

country,uni
Sweden,1.6
Germany,1
Poland,0.7

您有两次“

.data（data）

”。“创建SVG元素”和“Cat 1”中各有一个，这似乎就是d3在每个SVG中绘制每行数据的原因。“创建SVG元素”中的“

.data（data）

”就足够了

当“1类”更改为此

svg.append("line")
.attr("x1", w/2)
.attr("y1", h - stemL)
.attr("x2", function(d) {return w/2 + length1 * d.uni * Math.sin(angle1);})
.attr("y2", function(d) {return (h - stemL) - length1 * d.uni * Math.cos(angle1); })
.style("stroke", "steelblue")
.style("stroke-width", 5);

我有三条不同的线路

[编辑] 你也可以这样写：

var svg = d3.select("body")
        .selectAll("svg")
        .data(data)
        .enter()
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .append("line")
        .attr("x1", w/2)
        .attr("y1", h - stemL)
        .attr("x2", function(d) {return w/2 + length1 * d.uni * Math.sin(angle1);})
        .attr("y2", function(d) {return (h - stemL) - length1 * d.uni * Math.cos(angle1); })
        .style("stroke", "steelblue")
        .style("stroke-width", 5);

---

看一看，我相信这就是你在这里寻找的。不知道你所说的饼图布局是什么意思--看起来你没有使用饼图布局。谢谢你的链接Lars！因此，我得到的印象是，我确实需要Cat 1/行部分中的.data（data）之外的其他内容。已尝试.data（函数（d）{return d；}），但这也没有帮助！：-/P.S.在我的问题中删除了带有“饼图布局”的部分-这是误导性的..嗯，实际上没有嵌套结构-使用循环可能更容易实现。也就是说，通过行循环并为每行绘制SVG/行。感谢您的回答！当我删除Cat 1/测线部分中的.data（数据）时，不会绘制任何内容。我需要在引用数据时绑定它，但我现在确实认为它需要是其他的东西。尝试过。数据（函数（d）{return d；}）没有成功。你太棒了！！！！非常感谢！！我忘了删除“selectAll（“uni”）。。。我永远也想不到这一点！这背后的理性是什么？为什么不需要再次绑定数据，您是怎么想的？我想从中学习！谢谢你，你也可以投票支持我的答案：）数据已经绑定到svg，所以你不需要再添加它了，就这么简单，我明白了。。。很不幸，我不能投票支持你-（没有足够的声誉…d3冒险继续！：）下一期：。也许你能再帮我一次忙？：）