我尝试了这种不同的方式,但似乎没有任何工作.这是我目前拥有的
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”,…)的函数有关
我一直在网路上看到一个教程或如何绘制一个简单的多边形的例子,但我似乎找不到.
解决方法
多边形看起来像：< polygon points =“200,10 250,190 160,210”/>
所以,你的完整的poly数组应该会产生一个长的字符串,它将创建一个多边形.因为我们在谈论一个多边形,所以数据连接也应该是只有一个元素的数组.这就是为什么下面的代码显示：data([poly])如果你想要两个相同的多边形,你会将其更改为数据([poly,poly]).
目标是使用4个对象从数组中创建一个字符串.我用这个地图和另一个加入：
poly = [{"x":0.0,"y":25.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),");
}).join(" ");
})
.attr("stroke",2);
见工作小提琴：http://jsfiddle.net/4xXQT/