D3 V4从笔刷选择中获取数据

时间:2018-09-14 08:17:43

标签: javascript d3.js

我正在尝试在d3笔刷选择窗口中获取所有节点。我该如何处理?我尝试使用d3.event.selection,但似乎不起作用。

var brush = d3.brush()
     .extent([[0, 0], [width, height]])
     .on("start", brushstart)
     .on("brush", brushing)
     .on("end", brushend);

    svg.append("g")
      .attr('class', 'brush')
      .call(brush);

      // colors selected nodes in red
      function color_node(node) {
          // return "red";
          if (node.selected) { return "red"; }
          else { return "orange";}
      }

      function brushstart() {
          // do whatever you want on brush start
      }

      function brushing() {
        console.log("In brushing");
        var e = brush.extent().call();

        svg.selectAll("circle").style("fill", function(d) {
           truth = e[0][0] <= brushX.invert(d.x) && brushX.invert(d.x) <= e[1][0]
                && e[0][1] <= brushY.invert(d.y) && brushY.invert(d.y) <= e[1][1];
           value = truth ? "black" : color_node(d);
           return value;
        })
        ;

      }

      function brushend() {
        console.log("in brush end");
        // console.log(d3.brushSelection());
        var e = brush.extent().call();
        // console.log(d3.event.selection)
        if (d3.event.selection === null) svg.selectAll("circle").attr("class", function(d) {
            d.selected=false;
        });

        svg.selectAll("circle").attr("fill", function(d) {
           truth = e[0][0] <= brushX.invert(d.x) && brushX.invert(d.x) <= e[1][0]
                && e[0][1] <= brushY.invert(d.y) && brushY.invert(d.y) <= e[1][1];
           if (truth) { d.selected = true; }
           value = truth ? "red" : color_node(d);
           return value;
        });

      }

函数svgbrushing中的brushend用黑色填充了我图形中的节点。我想要的是用笔刷的选择替换svg,以便我只能处理所选的节点。

d3.event.selection似乎是一种解决方案。但这似乎不起作用。

0 个答案:

没有答案