d3 多个 svg，每个 1 行数据

Question

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

我查看了多个 SVG 的示例，例如 http://bl.ocks.org/mbostock/1305111 和 http://bl.ocks.org/mbostock/3888852 并调整了这个想法，据我所知，主要是将数据绑定到 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

Answer 1

你有两次“.data(data)”。 “创建 SVG 元素”中的一个和“Cat 1”中的一个，这似乎是 d3 在每个 SVG 中绘制每一行数据的原因。 “创建 SVG 元素”中的“.data(data)”就足够了。

当“Cat 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);