在 D3 中绘制多边形数据的正确格式 [英] Proper format for drawing polygon data in D3

问题描述

我尝试了不同的方法，但似乎没有任何效果.这是我目前拥有的:

var vis = d3.select("#chart").append("svg").attr("宽度", 1000).attr(高度"，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("多边形").data(poly).进入().append("多边形").attr(点"，函数(d){返回 [scaleX(d.x),scaleY(d.y)].join(",")}).attr(中风"，黑色").attr("笔画宽度",2);

我认为这里的问题要么与我将点数据定义为单个点对象数组的方式有关，要么与我如何为 .attr("points",...

我一直在网上寻找有关如何绘制简单多边形的教程或示例，但似乎找不到.

解决方案

多边形看起来像:<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("多边形").data([poly]).enter().append("多边形").attr(点"，函数(d){返回 d.map(function(d) {返回 [scaleX(d.x),scaleY(d.y)].join(",");}).加入(" ");}).attr(中风"，黑色").attr("笔画宽度",2);

参见工作小提琴:http://jsfiddle.net/4xXQT/

I've tried this different ways, but nothing seems to be working. Here is what I currently have:

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

I assume the problem here is either with the way I am defining the points data as an array of individual point objects, or something to do with how I'm writing the function for the .attr("points",...

I've been looking all over the web for a tutorial or example of how to draw a simple polygon, but I just can't seem to find it.

解决方案

A polygon looks something like: <polygon points="200,10 250,190 160,210" />

So, your full poly array should produce one long string that will create one polygon. Because we are talking about one polygon the data join should also be an array with only one element. That is why the code below shows: data([poly]) if you wanted two identical polygons you would change this to data([poly, poly]).

The goal is to create one string from your array with 4 objects. I used a map and another join for this:

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

See working fiddle: http://jsfiddle.net/4xXQT/

这篇关于在 D3 中绘制多边形数据的正确格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！