在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",...

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

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