D3.js v3到v4笔刷的更改

本文介绍了D3.js v3到v4笔刷的更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望从d3v3迁移到d3v4.特别是我在迁移画笔时遇到困难.

I'm looking to migrate from d3v3 to d3v4.In particular i'm having difficulties in migrating brushes.

有人可以看看下面的链接，让我知道更改吗? http://bl.ocks.org/zanarmstrong/ddff7cd0b1220bc68a58

Can someone please have a look at below link and let me know the changes?http://bl.ocks.org/zanarmstrong/ddff7cd0b1220bc68a58

我发现了一些变化:

d3.time.format-> d3.timeFormat

d3.time.format -> d3.timeFormat

d3.time.scale-> d3.scaleTime

d3.time.scale -> d3.scaleTime

在迁移过程中遇到的问题:

Facing issues in migrating:

d3.svg.brush-> d3.brushX

d3.svg.brush -> d3.brushX

感谢&问候

Naishav

推荐答案

像这样滥用d3.brush似乎很奇怪，因为您可以使用常规事件对其进行更直接的编码:

It seems rather strange to abuse the d3.brush like that when you can code this so much more straightforward with regular events:

<!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笔刷的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！