使用d3更改SVG元素

我想使用d3更改SVG somen元素属性。实际上，我将通过AJAX从服务器数据下载，这些数据将根据数据值更改SVG元素的颜色。使用d3更改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代码：使用VS2012，ASP

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

I'm。 NET与剃刀。

浏览器（丁目）说，在控制台上：

遗漏的类型错误：无法读取空

我曾尝试没有成功不同方法的特性“盒1”。

[编辑]

工作守则（不得不丢开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>

来源

2013-10-09 Mendes

你试过'd3.select（ “矩形”）的风格（ “补”， “蓝”）;'？ –

您可以省略前两行的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.

来源

2013-10-09 19:45:22

在我的环境中完全不能工作：VS2012，ASP.NET，MVC4，Razor。我有一个添加菜单和内容包装的_Layout文件。奇怪。现在在Chrome控制台上没有任何错误... – Mendes

也许还有别的东西会导致问题？你的AJAX请求是否返回任何内容？ –

我在VS中创建了一个空白项目，并添加了这个代码。 Chome显示没有错误，但不会改变颜色。在IE上，不改变颜色，我得到了这样的消息：在http：// localhost：7408/Scripts/d3-master/d3.js第24行第5列未处理的异常 0x800a138f - 无法获取'prototype'属性值：该对象为空或未验证（翻译）。 – Mendes

使用d3更改SVG元素

回答

相关问题