d3js / svg - 多边形没有固定坐标？ [英] d3js/svg - Polygon without fixed coordinates?

问题描述

是否可以在d3js中创建一个SVG多边形形状，而不用对坐标进行硬编码？

根据我的理解，创建SVG多边形形状的最常见方法是以硬编码坐标，如下面链接的示例中所做的。

处理多个多边形d3


http://www.w3.org/TR/SVG/shapes.html #PolygonElement

但是我不想硬编码坐标，因为我想使用力导向布局算法（在d3js中）定义坐标在下面的示例中完成。

http://bl.ocks.org/mbostock / 2706022

感谢，

Erno Lindfors

解决方案

请参阅以下答案： http://stackoverflow.com/a/13204818/1651713

使用强制布局可以正常工作，例如

  var polygon = svg .selectAll（'polygon'）
 .data（[nodes]）
 .enter（）
 .append（'polygon'）
 .style（'fill'，'green '）; 
 
 force.on（'tick'，function（）{
 polygon.attr（'points'，function（d）{
 return d.map {
 return [dx，dy] .join（'，'）; 
}）join（''）; 
}）; 
}）; 
  

Is it possible to create an SVG polygon shape in d3js without hard coding the coordinates?

From what I understand a most common way to create an SVG polygon shape is to hard code the coordinates like done in the below linked examples.
Process multiple polygons d3
http://www.w3.org/TR/SVG/shapes.html#PolygonElement

But I do not want to hard code the coordinates since I want to use a force directed layout algorithm (in d3js) to define the coordinates like done in the below linked example.
http://bl.ocks.org/mbostock/2706022

Thanks,
Erno Lindfors

解决方案

See this answer: http://stackoverflow.com/a/13204818/1651713

It works fine with a force layout, e.g.

var polygon = svg.selectAll('polygon')
  .data([nodes])
  .enter()
  .append('polygon')
  .style('fill', 'green');

force.on('tick', function() {
  polygon.attr('points',function(d){
    return d.map(function(d) {
      return [d.x,d.y].join(',');
    }).join(' ');
  });
});

这篇关于d3js / svg - 多边形没有固定坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！