16

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

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

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

4

3 回答 3

31

多边形看起来像：<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/

于 2012-11-03T00:27:07.527 回答
8

上面的答案是不必要的复杂。

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

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");
于 2017-09-10T09:03:08.820 回答
1

你想画多边形吗？- 像这样。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");
于 2012-11-03T00:19:21.493 回答