Question

我想使用d3更改SVG某个元素属性。实际上我将通过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，ASP.NET和Razor。

浏览器（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");

或者，正如Lars所建议的那样：

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

由于您选择的是SVG元素，因此必须使用fill属性而不是用于html的color。

Here is the fiddle with the update code.

使用d3更改SVG元素

1 个答案: