在D3中繪製多邊形數據的正確格式

我試過這種不同的方式，但似乎沒有任何工作。以下是我目前有：在D3中繪製多邊形數據的正確格式

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

我一直在尋找教程或如何繪製一個簡單的多邊形的例子，但我似乎無法找到它。

來源

2012-11-02 Evan Zamir

多邊形看起來像：<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-03 00:27:07 nautat

謝謝！我需要研究它，但顯然這個解決方案是有效的。你認爲這是做多邊形的最佳方式嗎？它只是讓我覺得在函數構造中擁有該函數有點笨拙。但也許這就是它的需要？我想我的問題是我應該以這種方式構建數據對象，或者有更好的方法來實現它。 –

給你更多的想法：如果原始數據是一個二維數組，其縮放數據點就像[[x1，y1]，[x2，y2]，[x3，y3]]，那麼點函數會簡單得多：function（d）{return d.join（「」）; }。這依賴於Javascript的數組默認的toString是用逗號連接它們的事實。例如console.log（「」+ [0,1,2]）;會打印「0,1,2」。 – nautat

請參閱修改的提琴演示此示例：http://jsfiddle.net/4xXQT/1/ – nautat

你想繪製多邊形形狀？ - 喜歡這個。 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-03 00:19:21

以上答案是不必要的複雜。

所有你需要做的是指定點作爲一個字符串，一切工作正常。下面的東西會起作用。

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-10 09:03:08

在D3中繪製多邊形數據的正確格式

回答

相關問題