Question

我正在寻求从d3v3迁移到d3v4。特别是我在移植画笔方面遇到了困难。

有人可以查看下面的链接，让我知道这些变化吗？ http://bl.ocks.org/zanarmstrong/ddff7cd0b1220bc68a58

我发现了一些变化：

d3.time.format - ＆gt; d3.timeFormat

d3.time.scale - ＆gt; d3.scaleTime

面对迁移问题：

d3.svg.brush - ＆gt; d3.brushX

谢谢＆amp;的问候，

Naishav

Answer 1

将`d3-brush`从D3 v3迁移到D3 v4 的快速指南（适用于brushX的示例）

将d3.svg.brush()替换为d3.brushX()。
将brushstart个活动重命名为start，将brushend重命名为end。
不要将比例调整为.x(xScale)，此方法现已丢失。将画笔边框传递为.extent([[xScale.range()[0], 0], [xScale.range()[1], brushHeight]])。
在事件处理程序中，您可以选择d3.event.selection，以便使用d3.event.selection.map(xScale.invert)获取所选值。
要设置选择，请执行.move(brushContainer, selectedDomain.map(xScale))。要清除选择，请执行.move(brushContainer, null)。请注意，这将触发事件处理程序。
.empty()方法，请使用d3.event.selection === null。
更新您的CSS，.extent现在为.selection，.resize为.handle并成为rect而不是g，其中包含rect }}。

Answer 2

当您可以使用常规事件对此进行更直接的编码时，滥用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>

D3.js v3到v4刷子更改

2 个答案:

将`d3-brush`从D3 v3迁移到D3 v4 的快速指南（适用于brushX的示例）

D3.js v3到v4刷子更改

2 个答案:

将d3-brush从D3 v3迁移到D3 v4 的快速指南（适用于brushX的示例）

将`d3-brush`从D3 v3迁移到D3 v4 的快速指南（适用于brushX的示例）