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);

d3多个svg，每行包含1行数据

1 个答案: