D3.js v3到v4刷子更改

Question

D3.js v3到v4刷子更改

Nai*_*hta 5 d3.js

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

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

我发现了一些变化:

d3.time.format - > d3.timeFormat

d3.time.scale - > d3.scaleTime

面对迁移中的问题:

d3.svg.brush - > d3.brushX

感谢和问候,

Naishav

Answer 1

Ale*_*tau 37

`d3-brush`从D3 v3 迁移到D3 v4的快速指南(brushX示例)

替换d3.svg.brush()为d3.brushX().
将brushstart事件重命名为start,brushendto 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

Mar*_*ark 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	6919 次
最近记录：	8 年，2 月前

D3.js v3到v4刷子更改

d3-brush从D3 v3 迁移到D3 v4的快速指南(brushX示例)

`d3-brush`从D3 v3 迁移到D3 v4的快速指南(brushX示例)