Question

我正在使用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：元素，然后一个绘制xs：属性等。

Answer 1

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

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

console.log(...JSONitem.map(el=>el.criteria));

其中selection是过滤的nodeEnter的值。

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

1 个答案: