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

参见工作 fiddle :http://jsfiddle.net/4xXQT/