Question

我正在研究this pie-chart。当用户点击馅饼的楔形时，我想要发生这种情况：

1）加载外部svg并插入右边的div（DONE）

1.1）svg具有以下结构

<svg id="Ebene_1">
  <circle></circle>
  <path></path>
<svg>

2）根据circle函数更改color()的填充，该函数根据楔形索引指定颜色

2）将path的填充更改为白色

这是我到目前为止的相关代码：

descrImg = d3.select("#descrImg");       //select the target div
descrImg.select("svg").remove();         //removes previous image
descrImgURI = d.data.descrImg;           //extract svg's URI from data
d3.xml(descrImgURI, "image/svg+xml", function(error, xml) {
       if (error) throw error;
       var svg= xml.documentElement;
       descrImg.node().appendChild(svg); //append svg
          var a = document.getElementById("Ebene_1");  //select svg
          var b = a.getElementsByTagName("cicle");     //select circle
          var c = a.getElementsByTagName("path");      //select path
          d3.select(c).attr("fill", "white");         //change path's fill attribute
       });

当我点击一个楔子时，svg正确加载但路径的填充没有改变。我收到以下错误（如果我使用style而不是attr，则会发生同样的情况）：

TypeError: this.setAttribute is not a function

其他选择：

//Option 1
var c = d3.select(document.getElementById("#Ebene_1").contentDocument).selectAll("path");
d3.select(c).attr("fill", "yellow");

//Option 2
var c = d3.select(document.getElementById("Ebene_1").contentDocument).selectAll("path");
d3.select(c).attr("fill", "yellow");

//Both return the error
TypeError: document.getElementById(...) is null


//while Option 3
var c = document.getElementById("Ebene_1").contentDocument.getElementsByTagName("path");
d3.select(c).attr("fill", "yellow");
//Returns
TypeError: document.getElementById(...).contentDocument is undefined

我不知道这是否重要，但是当我检查圈子或填充时，我看到他们的属性已被锁定＆＃34; （有点难以看到，但属性旁边有一个锁）

有什么想法吗？

Answer 1

我设法解决了这个问题。这是有效的代码：

d3.xml(descrImgURI, "image/svg+xml", function(error, xml) {
           if (error) throw error;
            var svg= xml.documentElement;
            descrImg.node().appendChild(svg);
            var a = document.getElementById("Ebene_1");
            var b = a.getElementsByTagName("circle")[0];
            var c = a.getElementsByTagName("path");
            // d3.select(b).attr("fill", function (d, i) {
            //       var scale = colorMap[d.data.categoria];
            //       if (scale) return scale(d.data.catIndex);
            //     })
            d3.select(b).attr("fill", fillColor);
            d3.selectAll(c).attr("fill", "white");
          });

getElementsByTagName返回一个项集合，无论集合中有多少项。因此，在b（即圆圈）的情况下，我必须选择连接的第一个元素（通过索引[0]）。另一方面，c中的路径可以通过使用d3.selectAll来共同修改。如果我使用与b相同的方法，那么只会修改第一组路径，至少在我的情况下，这会使一些图纸部分无色。

希望这有帮助！

d3.js更改通过d3.xml注入的外部svg的属性

1 个答案: