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

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

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

3 个答案: