javascript - d3.js根据数据值附加不同的SVG元素

我正在d3.js树上根据其元素类型在树中显示XML Schema元素。

我有如下代码：

    // Enter any new modes at the parent's previous position.
var nodeEnter = node.enter().append('g')
                    .attr('class', 'node')
                    .attr("transform", function(d) {
                          return "translate(" + source.y0 + "," + source.x0 + ")";
                    })
                    .on('click', clickXSD)
                    .on('dblclick', dblclickXSD);

nodeEnter.append('rect')
         .filter(function(d) { return d.data.elementType == "xs:element" })
         .attr('class', 'node')
         .attr('y', -16)
         .attr('rx', 5)
         .attr('ry', 5)
         .attr('width', function(d) { return d.data.y_size + 50; })
         .attr('height', function(d) { return 32; })
         .style("fill", function(d) {
               return d._children ? "lightsteelblue" : "lemonchiffon";
         });

我希望能够通过实现以下代码使代码更简洁：

nodeEnter.xs-element()
         .filter(function(d) { return d.data.elementType == "xs:element" })

或类似的东西，然后具有绘制xs：element的功能，然后具有绘制xs：attribute的功能，等等。

最佳答案

我在这里找到了答案：https://www.atlassian.com/blog/archives/extending-d3-js。

有两种可能的方法。一种是制作原型，另一种是使用调用函数。我正在使用第二种方式。

    nodeEnter.filter(function(d) { return d.data.elementType == "xs:element" }).call(xsElement);

  function xsElement(selection) {
    selection.append('rect')
    .attr('class', 'node')
    .attr('y', -16)
    .attr('rx', 5)
    .attr('ry', 5)
    .attr('width', function(d) {
    return d.data.y_size + 50;
    })
    .attr('height', function(d) {
    return 32;
    })
    .style("fill", function(d) {
    return d._children ? "lightsteelblue" : "lemonchiffon";
    })
    .filter(function(d) { return d.data.documentation != null })
    .append("title").text(function(d) { return d.data.documentation; });

  // Add labels for the nodes
  selection.append('text')
  .attr("dy", ".35em")
  .attr("y", -6)
  .attr("x", 6)
  .attr("text-anchor", "start")
  .text(function(d) { return d.data.name; });

.
.
.

  }

其中selection是过滤后的nodeEnter的值。

关于javascript - d3.js根据数据值附加不同的SVG元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43416534/