使用d3修改HTML中的SVG

這是我的第一篇文章，所以我會盡量確保我遵循適當的發佈禮節。使用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>

這裏是進行更改代碼：

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

來源

2015-07-21 e7h3r

我覺得我的錯誤是誤解了教程如何希望我所做的更改。我終於明白，我需要通過開發人員工具輸入命令來更改顏色等。感謝lhoworko和Mark的幫助。 – e7h3r

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

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

來源

2015-07-21 16:28:44 Mark

您的代碼看起來不錯，一定有另一個問題。看看這個小提琴演示會發生什麼。忽略轉換/持續時間/延遲，這只是爲了減慢一切，因此很容易看到。

http://jsfiddle.net/s6u5my8k/

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

來源

2015-07-21 16:31:29 lhoworko

使用d3修改HTML中的SVG

回答

相關問題