在D3中绘制多边形数据的正确格式

Question

我尝试过这种不同的方式，但似乎没有任何效果。 这是我目前拥有的：

var vis = d3.select("#chart").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

 scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,50])
        .range([500,0]),

poly = [{"x":0, "y":25},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];

vis.selectAll("polygon")
    .data(poly)
    .enter()
    .append("polygon")
    .attr("points",function(d) { 
        return [scaleX(d.x),scaleY(d.y)].join(",")})
    .attr("stroke","black")
    .attr("stroke-width",2);

我假设这里的问题是我将点数据定义为单个点对象的数组的方式，或者与我如何为.attr("points",...编写函数.attr("points",...

我一直在网上寻找一个如何绘制简单多边形的教程或示例，但我似乎无法找到它。

Answer 1

多边形看起来像： <polygon points="200,10 250,190 160,210" />

因此，您的完整多边形阵列应生成一个长字符串，该字符串将创建一个多边形 因为我们讨论的是一个多边形，所以数据连接也应该是只有一个元素的数组。 这就是为什么下面的代码显示： data([poly])如果你想要两个相同的多边形，你可以将它改为data([poly, poly]) 。

目标是从数组中创建一个包含4个对象的字符串。 我使用了map和另一个join ：

poly = [{"x":0.0, "y":25.0},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];

vis.selectAll("polygon")
    .data([poly])
  .enter().append("polygon")
    .attr("points",function(d) { 
        return d.map(function(d) {
            return [scaleX(d.x),scaleY(d.y)].join(",");
        }).join(" ");
    })
    .attr("stroke","black")
    .attr("stroke-width",2);

看工作小提琴： http ： //jsfiddle.net/4xXQT/

Answer 2

上述答案不必要地复杂化。

您所要做的就是将点指定为字符串，一切正常。 下面这样的东西会起作用。

var canvas = d3.select("body")
   .append("svg")
   .attr("height", 600)
   .attr("width", 600);

canvas.append("polygon")
   .attr("points", "200,10 250,190 160,210")
   .style("fill", "green")
   .style("stroke", "black")
   .style("strokeWidth", "10px");

Answer 3

你想画多边形吗？ - 像这样。 http://bl.ocks.org/2271944您的代码的开头看起来像一个典型的图表 - 通常会得出这样的结论。

chart.selectAll("line")
     .data(x.ticks(10))
   .enter().append("line")
     .attr("x1", x)
     .attr("x2", x)
     .attr("y1", 0)
     .attr("y2", 120)
.style("stroke", "#ccc");