代码之家  ›  专栏  ›  技术社区  ›  Nauman Zafar

D3V4从笔刷选择获取数据

  •  0
  • Nauman Zafar  · 技术社区  · 6 年前

    我正在尝试获取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;
            });
    
          }
    

    这个 svg brushing & brushend 函数用黑色填充图形中的节点。我想用它来代替 svg格式 与我的画笔选择,所以我只能处理选定的节点。

    d3号。事件选择 似乎是一个解决方案。但似乎不起作用。

    0 回复  |  直到 6 年前