d3从数组创建SVG路径

压力

按照此示例http://jsfiddle.net/4xXQT/,我可以使用https://jsfiddle.net/il_pres/qq9o1ovt/来使用D3渲染存储在一个数组中的点坐标

var vis = d3.select("body").append("svg")
     .attr("width", 30)
     .attr("height", 30);
var regioni = [{regione:'Abruzzo',polygon:{points:'25.171,18.844 25.094,18.582 24.567,17.714 24.015,17.714 23.226,16.899 22.805,16.268 21.911,14.558 21.043,14.427 20.753,15.163 20.043,15.084 19.938,15.741 19.386,16.268 19.386,17.056 18.439,16.899 18.202,17.345 18.334,17.924 18.281,18.582 19.57,19.423 18.939,20.055 18.176,19.581 17.756,20.16 17.808,20.844 18.703,21.08 19.517,21.396 19.491,22.079 20.517,22.185 20.596,22.605 21.122,22.133 21.832,22.658 22.568,22.737 23.094,23.473 23.646,22.553 23.751,21.738 24.646,21.212 25.094,21.738 25.409,22.29 26.25,21.238 26.409,20.475 26.776,19.923 26.303,19.634 26.145,19.292'}},{regione:'Basilicata',polygon:{points:'24.607,15.268 23.476,14.716 23.818,14.4 23.161,13.848 22.556,14.111 22.135,14.005 21.529,14.452 20.53,14.716 19.294,14.111 18.952,13.742 18.426,14.242 18.479,14.926 17.637,14.321 17.295,14.531 17.479,15.426 16.611,16.083 17.216,16.451 17.637,17.556 18.321,18.214 18.453,18.792 19.189,18.871 19.61,18.424 20.662,19.186 20.662,19.581 20.109,19.844 19.978,20.344 20.662,20.081 21.188,20.318 21.372,20.002 21.951,19.713 22.424,19.713 22.949,20.265 23.423,20.896 23.555,21.448 23.187,22.053 23.213,22.658 23.844,23.027 24.475,23.105 25.159,23.605 25.08,23.894 25.58,24.157 26.158,24.157 26.5,23.552 27.105,23.552 27.631,22.816 27.92,22.238 27.579,21.291 26.658,20.475 26.132,19.844 26.053,19.239 25.238,18.45 25.238,17.766 26.001,17.74 26.264,17.398 26.21,16.609 25.764,16.32 24.712,16.136'}}];
vis.selectAll("polygon")
.data(regioni) .enter().append("polygon")
.attr("points",function(d) {return d.polygon.points})
.attr("stroke","red")
.attr("stroke-width",0.1);

现在我正在尝试使用相同的svg形状进行相同的操作,这次将其存储为d坐标

var regionico =[{Regione:'Abruzzo',polygon:{points:'m 127.945,84.9805 -0.781,2.6172 -5.273,8.6835 -5.508,0 -7.891,8.1528 -4.219,6.308 -8.9292,17.09 -8.6836,1.32 -2.8985,-7.363 -7.1015,0.789 -1.0547,-6.57 -5.5157,-5.266 0,-7.89 -9.4648,1.582 -2.3711,-4.4731 1.3164,-5.7812 -0.5273,-6.582 12.8906,-8.4063 -6.3086,-6.3203 -7.6367,4.7383 -4.1992,-5.793 0.5273,-6.8359 8.9453,-2.3633 8.1445,-3.1641 -0.2617,-6.8242 10.2617,-1.0664 0.7813,-4.1992 5.2656,4.7265 7.0977,-5.2539 7.3632,-0.7812 5.25,-7.3633 5.527,9.1992 1.055,8.1446 8.945,5.2656 4.473,-5.2656 3.164,-5.5157 8.399,10.5157 1.601,7.6367 3.652,5.5195 -4.726,2.8906 -1.582,3.418 -9.727,4.4805'}},{Regione:'Basilicata',polygon:{points:'m 123.746,104.57 -7.637,-4.7458 -9.453,3.4178 -3.961,8.692 -12.3512,2.089 2.1093,9.739 -7.6289,4.734 -5,-5.516 -6.0547,3.418 -7.3633,-7.109 0.5274,-7.891 -2.6172,-3.41 -7.6367,-0.527 0,-6.57 8.1445,-7.9027 0.8008,-6.0352 5.2539,-6.3281 9.4727,-8.1445 3.4101,-9.4727 -3.1562,-6.0547 -5,-7.0898 5.2617,-5.2617 2.1094,-5.2539 2.8906,6.8242 8.9375,0.8008 3.4375,-7.625 16.8128,4.207 3.945,14.9805 12.109,-1.0547 9.981,23.4101 -9.727,5.7891 0,14.4723 -7.617,3.418'}}

但是如果我在d中使用与attr相同的代码。

vis.selectAll("path")
.data(regionico).enter().append("path")
.attr("d",function(d) { return d.polygon.points})
.attr("stroke","red")
.attr("stroke-width",0.1);

它不起作用。有什么建议吗?

拉尔斯·科特霍夫(Lars Kotthoff)

问题很简单,就是您的SVG不够大,无法path显示出来-特别注意在开始路径之前,您是如何先向右移动100多个像素。如果您将SVG增大,则效果很好,例如,此处为300x300

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

d3从数组创建SVG路径

来自分类Dev

d3从JSON路径创建svg

来自分类Dev

D3 svg 路径重叠

来自分类Dev

当应用蒙版时,由d3(d3.svg.arc)创建的SVG路径元素消失

来自分类Dev

当应用蒙版时,由d3(d3.svg.arc)创建的SVG路径元素消失

来自分类Dev

如何在SVG中为D3画笔创建路径

来自分类Dev

如何在d3和SVG中创建阴影路径?

来自分类Dev

如何获得SVG路径形状以缩放D3?

来自分类Dev

d3可拖动svg路径线段

来自分类Dev

在d3中访问SVG路径长度

来自分类Dev

更新 svg 和 d3 中的路径样式

来自分类Dev

为D3和SVG元素创建动画

来自分类Dev

从html创建数组以使用D3 Wordcloud显示

来自分类Dev

SVG中的路径位于D3图表中圆圈的前面,尽管有附加顺序

来自分类Dev

将边框添加到SVG路径d3 JavaScript

来自分类Dev

如何选择具有特定ID的d3 svg路径

来自分类Dev

缩放到使用D3外部加载SVG边界路径箱

来自分类Dev

d3 JavaScript,获取svg路径中两点之间的距离

来自分类Dev

检查路径是否在带有d3的svg中具有标题

来自分类Dev

将多条路径合并到一个D3(SVG)中

来自分类Dev

D3:无法将简单路径追加到svg容器

来自分类Dev

svg路径中的d3 js三角形

来自分类Dev

带有路径和 SVG 的 d3 动画折线图

来自分类Dev

d3 雷达图——radialLine 创建路径但没有坐标

来自分类Dev

d3:使用更多维度数组复制路径

来自分类Dev

D3 + Google地图+多点路径

来自分类Dev

d3中的并排路径

来自分类Dev

D3沿路径的多个动画

来自分类Dev

d3,更新多个路径