logo标签列表

D3.js v3 到 v4 的刷子（Brush）变化

d3.js
6
我希望从d3v3迁移到d3v4。特别是在迁移brushes方面遇到了困难。
请有人查看下面的链接并让我知道更改内容？ http://bl.ocks.org/zanarmstrong/ddff7cd0b1220bc68a58 我已经确定了一些更改：
d3.time.format -> d3.timeFormat
d3.time.scale -> d3.scaleTime 在迁移中遇到的问题：
d3.svg.brush -> d3.brushX
谢谢和问候，
Naishav
这个链接将帮助你从d3v3迁移到d3v4：https://github.com/d3/d3/blob/master/CHANGES.md - Shaishav Jogani
2个回答
43

从D3 v3迁移到D3 v4的d3-brush快速指南

  1. 使用d3.brushX()替换d3.svg.brush()。
  2. 将brushstart事件重命名为start，brushend重命名为end。
  3. 不要将比例尺传递给.x(xScale)，因为该方法现在已经不存在了。使用.extent([[xScale.range（）[0]，0]，[xScale.range（）[1]， brushHeight]])将画笔边界作为参数传递。
  4. 在事件处理程序中，您可以通过d3.event.selection获取选择项，并使用d3.event.selection.map（xScale.invert）获取所选值。
  5. 要设置选择，请使用.move（brushContainer，selectedDomain.map（xScale））。要清除选择，请使用.move（brushContainer，null）。请注意，这将触发事件处理程序。
  6. .empty()方法现在不存在，使用d3.event.selection === null。
  7. 更新您的CSS，.extent现在是.selection，.resize是.handle，并且成为一个包含rect的g而不是rect。
3

如果您使用常规事件，可以更直接地编写代码，而不是像滥用 d3.brush 这样看起来相当奇怪：

<!DOCTYPE html>
<html>

<head>
  <style>
      body {
      background-color: #393939;
      font-size: 14px;
      font-family: 'Raleway', sans-serif;
    }
    
    p {
      color: white;
      margin: 50px;
    }
    
    a {
      color: #4FDEF2;
    }
    
    .axis {
      fill: gray;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
    
    .axis .halo {
      stroke: gray;
      stroke-width: 4px;
      stroke-linecap: round;
    }
    
    .handle path {
      stroke: white;
      stroke-width: 3px;
      stroke-linecap: round;
      pointer-events: none;
    }
    
    .handle text {
      fill: white;
      text-align: center;
      font
  </style>
</head>

<body>

  <script src="https://d3js.org/d3.v4.min.js"></script>

  <script>
    // parameters
    var margin = {
        top: 50,
        right: 50,
        bottom: 50,
        left: 50
      },
      width = 960 - margin.left - margin.right,
      height = 300 - margin.bottom - margin.top;


    // scale function
    var timeScale = d3.scaleTime()
      .domain([new Date('2012-01-02'), new Date('2013-01-01')])
      .range([0, width])
      .clamp(true);

    var formatDate = d3.timeFormat("%b %d");

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      // classic transform to position g
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      

    svg.append("rect")
      .style("pointer-events", "all")
      .style("fill", "none")
      .attr("width", width)
      .attr("height", height)
      .style("cursor", "crosshair")
      .on("mousedown", function(){
        updatePos(this);
      })
      .on("mousemove", function(){
        if (d3.event.which === 1){
          updatePos(this);
        }
      });

    function updatePos(elem){
      var xPos = d3.mouse(elem)[0];
      handle.attr('transform', 'translate(' + xPos + ",0)");
      text.text(formatDate(timeScale.invert(xPos)));
    }

    svg.append("g")
      .attr("class", "x axis")
      // put in middle of screen
      .attr("transform", "translate(0," + height / 2 + ")")
      // inroduce axis
      .call(d3.axisBottom()
        .scale(timeScale)
        .tickFormat(function(d) {
          return formatDate(d);
        })
        .tickSize(0)
        .tickPadding(12)
        .tickValues([timeScale.domain()[0], timeScale.domain()[1]]))
      .select(".domain")
      .select(function() {
        console.log(this);
        return this.parentNode.appendChild(this.cloneNode(true));
      })
      .attr("class", "halo");

    var handle = svg.append("g")
      .attr("class", "handle")
      
    handle.append("path")
      .attr("transform", "translate(0," + height / 2 + ")")
      .attr("d", "M 0 -20 V 20")

    var text = handle.append('text')
      .text(formatDate(timeScale.domain()[0]))
      .attr("transform", "translate(" + (-18) + " ," + (height / 2 - 25) + ")");

  </script>
</body>

</html>

感谢您展示了如此简单的方法。在d3v4中，d3.brush似乎要复杂得多。 - Naishav Mehta
@AlexanderShutov，我修复了代码片段。 - Mark
我也不喜欢黑盒子，但在这种情况下，D3刷子还处理触摸事件和一些按键（例如，当您按住ALT键时，可以在两个方向上更改选择）https://github.com/d3/d3-brush/blob/master/src/brush.js - Alexander Shutau
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接