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

问题描述

我尝试过这种不同的方式，但似乎没有什么工作。这是我目前有的：

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

我假设这里的问题是我将点数据定义为个人数组点对象，或者与我如何为 .attr（points，...

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.

推荐答案

多边形看起来像：< polygon points =200,10 250,190 160,210/>

所以，你的全多边形数组应该产生一个长字符串，创建一个多边形。因为我们谈论一个多边形，数据连接也应该是一个只有一个元素的数组。是为什么下面的代码显示： data（[poly]）如果你想要两个相同的多边形，你会将其更改为 data ）。

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]).

目标是使用4个对象从数组中创建一个字符串，我使用 map 和另一个加入：

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

查看工作小提琴： http://jsfiddle.net/4xXQT/

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