Question

我有一个Object来存储svg形状的信息。它具有以下结构：

  Shapes = {
        id: <Shape ID>,
        objType: <Tag Name of Shape e.g ellipse or line>,
        Coordinates: < Object Containing relevant data for drawing >,
        Style:  <Object Containing relevant data for styling>,
 }

Examples for Coordinates and Style could be:
 Shapes.Coordinates = {
     x1: 10, // for Lines
     y1: 10,
     x2: 100,
     y2: 100,
 }

 Shapes.Coordinates = {
     cx: 10 ,// for Circles
     cy: 10,
     r: 10,
 }

 Shapes.Style = {
    fill: "black",
    stroke: "red",
    "stroke-width": 10
 }

现在我想要一个D3调用来利用给定的数据，根据对象数据绘制不同的形状。到目前为止，我最好的想法是以下代码：

首先，我创建没有属性的每个形状，只创建ID和事件。

    let objectsRender = svg.selectAll("line") 
                       .data(data)
                       .enter()
                       .append(function(d) {
                         return document.createElement(d.objType);
                       })
                       .attr("id", function(d){ return prefix +d._id;})
                       .attr("class", "no-attr")
                       .on("click",(d)=>{this.modeClick(d);});

然后我在第二次调用中添加属性，通过使用for循环找到正确的id，我认为这不是一个好的解决方案。通过查找类no-attr

的任何标记，我可以找到“空”svg标记

let objectsAttributes=  svg.selectAll(".no-attr").each(function(){
    let id= d3.select(this).attr("id");
    let d = null;
    d = data[0];

    for(i = 0;i < props.data.length; i++){
      if(id == prefix +props.data[i]._id){
        d = props.data[i];
        break;
      }
    }

    if( d !== null){
    d3.select(this)
      .attr(d.coordinates)
      .attr(d.style)
      .attr("class", null);
    }

到目前为止，这个临时解决方案会创建具有相关属性的所有形状。但形状不可见，它与追加调用有关。

                       .append(function(d) {
                         return document.createElement(d.objType);
                       })

有人可以建议一个更好的解决方案或告诉我，为什么我的svg在我的浏览器窗口中不可见，但通过开发工具可见？

Answer 1

无法使用document.createElement创建SVG元素，该方法只能创建html元素。

必须通过document.createElementNS（＆＃39; http://www.w3.org/2000/svg＆＃39;，＆lt; element name＆gt;）在SVG名称空间中创建SVG元素，所以我想在你的情况下你会想要

.append(function(d) {
      return document.createElementNS('http://www.w3.org/2000/svg', d.objType);
})

浏览器工具向您显示您已经创建了与您真正想要的SVG元素名称相同的html元素，但因为它们是html元素，所以它们不起作用。

D3在一次调用中绘制不同的SVG形状，没有可见性

1 个答案: