Question

我正在努力重绘/更新我的SVG。我为我的数据包含了enter-update-exit方法，我的DOM结构如下所示：

<svg>
  <g id="groupOfRectangles">
    <rect>
    <rect>
    <rect>
    <rect>
    ...
  </g>
</svg>

现在我想在DOM结构中将一些特定的矩形组合在一起。例如：

<svg>
  <g id="groupOfRectangles">
    <rect>  
    <g id="Group1">
      <rect>
      <rect>  
    </g>  
    <rect>
    ...
  </g>
</svg>

我到目前为止：

var rect = render();  
//until here, everything is displayed correctly
d3.select(rect._groups[0][x]).before('g').attr("id", "Group" + 1);
document.getElementById("Group1").appendChild(rect._groups[0][x]);
document.getElementById("Group1").appendChild(rect._groups[0][x]);  
render();

执行此操作后，由“Group1”分组的矩形隐藏在我的可视化中，但仍然在我的DOM树中分组。所以我试图回忆起我的渲染功能，但没有任何改变。

function render() {
    var group = rectGroup.selectAll("rect").data(nodes);

    group = group.enter()
            .append("rect")
            .attr("width", function(d) { return d.value; })
            .attr("height", rectHeight)
            .attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });

    group.select("rect")
            .attr("width", function(d) { return d.value; })
            .attr("height", rectHeight)
            .attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });

    group.exit().remove();

    return group;
}

这样做的原因是与矩形的交互，我想稍后实现。我只需要与一组矩形进行交互，而不是寻找属于一起的每一个矩形。那么我做错了什么？有没有更有效的方法来分组特定的矩形？

或者在调用render函数之前将它们组合在一起是否可能（可能更容易？）？

修改-1：
这是一些工作代码，我将2个矩形元素切换到DOM树中的新组。您可以在计划功能的第二行中看到它。

var width = 500;
var height = 500;

obj1 = {value: 99, x: 0, y:25, height: 20};
obj2 = {value: 200, x: 0, y:50, height: 20};
obj3 = {value: 300, x: 0, y:100, height: 20};
obj4 = {value: 250, x: 0, y:125, height: 20};
obj5 = {value: 370, x: 0, y:75, height: 20};
var myData = [obj1, obj2, obj3, obj4, obj5];

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var rectGroup = svg.append("g").attr("id", "groupOfRectangles");

d3.selection.prototype.before = function(tagName) {
    var elements = [];

    this.each(function() {
        var element = document.createElement(tagName);
        this.parentNode.insertBefore(element, this);
        elements.push(element);
    });

    return d3.selectAll(elements);
};

function render() {
    var group = rectGroup.selectAll("rect").data(myData);

    group = group.enter()
            .append("rect")
            .attr("width", function(d) { return d.value; })
            .attr("height", rectHeight)
            .attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });

    group.select("rect")
            .attr("width", function(d) { return d.value; })
            .attr("height", rectHeight)
            .attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });

    group.exit().remove();

    return group;
}

function schedule() {
    var rect = render();
    d3.select(rect._groups[0][3]).before('g').attr("id", "Group" + 1);
    document.getElementById("Group1").appendChild(rect._groups[0][3]);
    document.getElementById("Group1").appendChild(rect._groups[0][4]);
}

schedule();

Answer 1

在before原型中，您需要使用createElementNS并指定SVG命名空间：

this.each(function() {
  var element = document.createElementNS("http://www.w3.org/2000/svg", tagName);
  this.parentNode.insertBefore(element, this);
  elements.push(element);
});

D3 - 在DOM更改后重绘SVG

1 个答案: