使用d3在HTML中修改SVG

Question

這是我的第一篇文章，所以我會盡力確保我遵循適當的帖子禮儀。

我對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>

以下是進行更改的代碼：

var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);

Answer 1

你的代碼是正確的。 我猜你沒有正確地把它放在一起。 這是最簡短的例子：

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <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> <script> var circle = d3.selectAll("circle"); circle.style("fill", "steelblue"); circle.attr("r", 30); </script> </body> </html>

Answer 2

你的代碼看起來很好，必須有另一個問題。 看看這個小提琴來演示應該發生什么。 忽略轉換/持續時間/延遲，這只是為了減慢一切，所以它很容易看到。

http://jsfiddle.net/s6u5my8k/

var circle = d3.selectAll('circle')
    .transition().duration(750).delay(750)
    .style('fill', 'steelblue')
    .attr('r', 30);

使用d3在HTML中修改SVG

問題描述

2 個解決方案

解決方案1
1 已采納 2015-07-21 16:28:44

解決方案2
1 2015-07-21 16:31:29

使用d3在HTML中修改SVG

問題描述

2 個解決方案

解決方案1 1 已采納 2015-07-21 16:28:44

解決方案2 1 2015-07-21 16:31:29

解決方案1
1 已采納 2015-07-21 16:28:44

解決方案2
1 2015-07-21 16:31:29