小编e7h*_*h3r的帖子

使用d3在HTML中修改SVG

这是我的第一篇文章,所以我会尽力确保我遵循适当的帖子礼仪.

我对html,d3或javascript没有任何经验.但我确实有一些xml和svg的曝光.我正在尝试完成本教程:[ http://bost.ocks.org/mike/circles/].我花了几个小时昨天毫无结果地试图完成第一步,即使用d3.selectAll()改变三个圆圈的颜色和半径.我已经阅读了这里的几篇文章并查看了其他教程,但我不能为我的生活让圈子变蓝.不幸的是,教程永远不会显示他们的全部代码.我已经能够在我的浏览器中显示三个黑色圆圈(原始svg),但似乎无法让d3选择它们并执行更改.我甚至不确定xml是否嵌入在html中,或者它是否是外部的并以某种方式读取.

有人可以发布您用来做这个的HTML吗?任何帮助将不胜感激.

这是与圆圈对应的xml:

<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
 <circle cx="80" cy="60" r="10"></circle>
  <circle cx="120" cy="60" r="10"></circle>
</svg>
Run Code Online (Sandbox Code Playgroud)

以下是进行更改的代码:

var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
Run Code Online (Sandbox Code Playgroud)

html javascript svg d3.js

5
推荐指数
1
解决办法
64
查看次数

标签 统计

d3.js ×1

html ×1

javascript ×1

svg ×1