使用d3更改SVG元素

Question

我想使用d3更改SVG somen元素的外觀。 實際上，我將通過AJAX從服務器數據下載文件，這些數據將根據數據值更改SVG元素的顏色。

這是我更改SVG元素圖形行為的代碼：

SVG示例文件：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="box1" height="54" width="106" y="73" x="53" stroke-width="2" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="39" rx="41" id="circle1" cy="103" cx="246" stroke-width="2" stroke="#000000" fill="#FF0000"/>
  <path id="multiline1" d="m395,105l70,10c0,0 11,63 11,64c0,1 -3,60 -9,61c-6,1 -75,1 -79,1c-4,0 -43,-16 -42,-25c1,-9 -4,-29 1,-42c5,-13 14,-57 14,-58" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

HTML代碼：

<script src="~/Scripts/d3-master/d3.min.js" charset="utf-8"></script>

<object id="svgobject" type="image/svg+xml" data=".\svg\mainscreen.svg">
</object>

<script type="text/javascript">

    var element = d3.selectAll("svgobject");
    var item = element.property("box1");
    item.style("color", "blue");

</script>

我正在使用VS2012，帶有Razor的ASP.NET。

瀏覽器（Chome）在控制台上說：

未捕獲的TypeError：無法讀取null的屬性“ box1”

我嘗試了不同的方法，但均未成功。

[編輯]

工作代碼（不得不暫時忘記d3）：

<script type="text/javascript">

    var mySvg = document.getElementById("svgobject");
    alert(mySvg);
    mySvg.addEventListener("load", function () {
        var svg = mySvg.getSVGDocument();
        alert(svg);
        svg.getElementById("box1").setAttribute("fill", "green");
    });

</script>

Answer 1

您可以省略js的前兩行，只需使用：

var item = d3.select("#box1")
item.style("fill", "blue");

或者，就像拉爾斯建議的那樣：

d3.select("#box1").style("fill", "blue");

由於要選擇SVG元素，因此必須使用fill屬性而不是用於html的color 。

這是帶有更新代碼的小提琴。