数据可视化 D3.js v3v4版本比较及方法的变化汇总

  这段时间在学习D3 翻到的一些博客和看的学习资料都比较早，普遍都是v3版本的，但是我下载的版本却是v4的因此也确实造成了一些麻烦。

  官方在v3 更新到v4 的时候将方法进行了规范，因此在使用的过程中会有一些方法的变化

  以下将会总结我在学习时遇到的因版本变化而造成的问题。

---

比例尺 scale

线性比例尺

V3 scale linear

 var linear = d3.scale.linear()
                .domain([min, max])
                .range([0, 300]);

V4 scaleLinear

 var linear = d3.scaleLinear()
                .domain([min, max])
                .range([0, 300]);

序数比例尺

v3 scale ordinal

var ordinal = d3.scale.ordinal()
				.domain(index)
				.range(word);

v4 scaleOrdinal

var ordinal = d3.scaleOrdinal()
				.domain(index)
				.range(word);

---

定义坐标

v3 scale.ordinal().rangeRoundBands

var xScale=d3.scale.ordinal()
     .domain(d3.range(dataset.length))  
     .rangeRoundBands([0,w],0.05);

v4 scaleBand.rangeRound

var xScale=d3.scaleBand()
     .domain(d3.range(dataset.length))  
     .rangeRound([0,w]).padding(0.05);

---

间距设置

v3 rangeBand

xScale.rangeBand()

v4 bandwidth

xScale.bandwidth() 

---

刻度尺 axis

v3

//axis()刻度尺方法，orient()定义刻度尺方向
var yAxis = d3.axis().scale(yScale).orient("left");

v4

var yAxis = d3.axisLeft().scale(yScale);//刻度向左
var yAxis = d3.axisRight().scale(yScale);//刻度向右
var yAxis = d3.axisBottom().scale(yScale);//刻度向下
var yAxis = d3.axisTop().scale(yScale);//刻度向上

---

缓动函数 ease

有circle(加速)elastic(伸缩),linear(匀速),bounce(弹跳)

v3

svg.ease("circle")
svg.ease("elastic")
svg.ease("linear")
svg.ease("bounce")

v4

svg.ease(d3.easeCircle)
svg.ease(d3.easeElastic)
svg.ease(d3.easeLinear)
svg.ease(d3.easeBounce)

---

力向布局 force

v3 force

var force = d3.layout.force().nodes(nodes)
        .links(lines)
        .size([width, height])
        .linkDistance(200)
        .charge(-800)
        .start()
        .on("tick", function () {
			//具体的方法
        });

v4 forceSimulation

var simulation = d3.forceSimulation(nodes)
        .force("link", d3.forceLink(links).distance(200))
        .force("charge",d3.forceManyBody().strength(-100))
        .force("center",d3.forceCenter(width/2, height/2));
simulation.on("tick",function(){
	//具体的方法
});

---

拖动（drag）， 缩放（zoom）

拖动 drag

v3

var drag = d3.behavior.drag()
      .origin(function (d) {
        return d;
      })
      .on("dragstart", dragstarted)
      .on("drag", dragged)
      .on("dragend", dragended);

	  function dragstarted(d) {
        d3.event.sourceEvent.stopPropagation();
        d3.select(this).classed("dragging", true);
        force.start();
      }

      function dragged(d) {
        d.x = d3.event.x;
        d.y = d3.event.y;
      }

      function dragended(d) {
        d3.select(this).classed("dragging", false);
      }

v4

var drag = d3.drag()
      .origin(function (d) {
        return d;
      })
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);

缩放 zoom

v3

var zoom = d3.behavior.zoom()
      .scaleExtent([0.1, 10]).on("zoom", zoomed);
      
      function zoomed() {
      //view 是我 .append("g") 添加的group元素
        view.attr("transform",
          "translate(" + d3.event.translate + ")scale(" +
          d3.event.scale + ")");
      }

	svg.on("dblclick.zoom", () => {});//禁止双击放大；

v4

var zoom = d3.zoom()
      .scaleExtent([0.1, 10]).on("zoom", zoomed);

function zoomed() {
  var transform = d3.event.transform;
        svg_nodes.attr('transform', transform);
        svg_links.attr("transform",transform);
        svg_text.attr("transform",transform);
 }
 
svg.on("dblclick.zoom", () => {});//禁止双击放大；

---

定时器

v3 d3.timer

d3.timer(function(){
//具体的方法
},4000);

v4 d3.timeout

d3.timeout(function(){
//具体的方法
},4000);

---

（PS：持续更新中）