d3.js - 轴标签帮助（从v3到v4）

我正在参加D3.js的在线教程。自从最近推出的版本4以来，旧版本中有些东西在版本4中不会支持。我一直在寻找他们的github来寻找比较。d3.js - 轴标签帮助（从v3到v4）

无论如何，我很困惑这一部分的课程 - 在图形上标记轴。

下面是3版本中的工作代码：

这是我在第4版的尝试：

版本3

var data = [ 
    {key: "Jelly", value: 60, date: "2014/01/01" }, 
    {key: "Jelly", value: 58, date: "2014/01/02" }, 
    {key: "Jelly", value: 59, date: "2014/01/03" }, 
    {key: "Jelly", value: 56, date: "2014/01/04" }, 
    {key: "Jelly", value: 57, date: "2014/01/05" }, 
    {key: "Jelly", value: 55, date: "2014/01/06" }, 
    {key: "Jelly", value: 56, date: "2014/01/07" }, 
    {key: "Jelly", value: 52, date: "2014/01/08" }, 
    {key: "Jelly", value: 54, date: "2014/01/09" }, 
    {key: "Jelly", value: 57, date: "2014/01/10" }, 
    {key: "Jelly", value: 56, date: "2014/01/11" }, 
    {key: "Jelly", value: 59, date: "2014/01/12" }, 
    {key: "Jelly", value: 56, date: "2014/01/13" }, 
    {key: "Jelly", value: 52, date: "2014/01/14" }, 
    {key: "Jelly", value: 48, date: "2014/01/15" }, 
    {key: "Jelly", value: 47, date: "2014/01/16" }, 
    {key: "Jelly", value: 48, date: "2014/01/17" }, 
    {key: "Jelly", value: 45, date: "2014/01/18" }, 
    {key: "Jelly", value: 43, date: "2014/01/19" }, 
    {key: "Jelly", value: 41, date: "2014/01/20" }, 
    {key: "Jelly", value: 37, date: "2014/01/21" }, 
    {key: "Jelly", value: 36, date: "2014/01/22" }, 
    {key: "Jelly", value: 39, date: "2014/01/23" }, 
    {key: "Jelly", value: 41, date: "2014/01/24" }, 
    {key: "Jelly", value: 42, date: "2014/01/25" }, 
    {key: "Jelly", value: 40, date: "2014/01/26" }, 
    {key: "Jelly", value: 43, date: "2014/01/27" }, 
    {key: "Jelly", value: 41, date: "2014/01/28" }, 
    {key: "Jelly", value: 39, date: "2014/01/29" }, 
    {key: "Jelly", value: 40, date: "2014/01/30" }, 
    {key: "Jelly", value: 39, date: "2014/01/31" } 
]; 
var w = 800; 
var h = 450; 
var margin = { 
    top: 58, 
    bottom: 100, 
    left: 80, 
    right: 40 
}; 
var width = w - margin.left - margin.right; 
var height = h - margin.top - margin.bottom; 

var svg = d3.select("body").append("svg") 
      .attr("id", "chart") 
      .attr("width", w) 
      .attr("height", h); 
var chart = svg.append("g") 
      .classed("display", true) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
var dateParser = d3.time.format("%Y/%m/%d").parse; 
var x = d3.time.scale() 
     .domain(d3.extent(data, function(d){ 
      var date = dateParser(d.date); 
      return date; 
     })) 
     .range([0,width]); 
var y = d3.scale.linear() 
     .domain([0, d3.max(data, function(d){ 
      return d.value; 
     })]) 
     .range([height,0]); 
var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom") 
      .ticks(d3.time.days, 7) 
      .tickFormat(d3.time.format("%m/%d")); 
var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .ticks(5); 
function plot(params){ 
    this.append("g") 
     .classed("x axis", true) 
     .attr("transform", "translate(0," + height + ")") 
     .call(params.axis.x); 
    this.append("g") 
     .classed("y axis", true) 
     .attr("transform", "translate(0,0)") 
     .call(params.axis.y); 
    //enter() 
    this.selectAll(".point") 
     .data(params.data) 
     .enter() 
      .append("circle") 
      .classed("point", true) 
      .attr("r", 2); 
    //update 
    this.selectAll(".point") 
     .attr("cx", function(d){ 
      var date = dateParser(d.date); 
      return x(date); 
     }) 
     .attr("cy", function(d){ 
      return y(d.value); 
     }) 
    //exit() 
    this.selectAll(".point") 
     .data(params.data) 
     .exit() 
     .remove(); 
} 
plot.call(chart, { 
    data: data, 
    axis: { 
     x: xAxis, 
     y: yAxis 
    } 
});

版本4

var data = [ 
    {key: "Jelly", value: 60, date: "2014/01/01" }, 
    {key: "Jelly", value: 58, date: "2014/01/02" }, 
    {key: "Jelly", value: 59, date: "2014/01/03" }, 
    {key: "Jelly", value: 56, date: "2014/01/04" }, 
    {key: "Jelly", value: 57, date: "2014/01/05" }, 
    {key: "Jelly", value: 55, date: "2014/01/06" }, 
    {key: "Jelly", value: 56, date: "2014/01/07" }, 
    {key: "Jelly", value: 52, date: "2014/01/08" }, 
    {key: "Jelly", value: 54, date: "2014/01/09" }, 
    {key: "Jelly", value: 57, date: "2014/01/10" }, 
    {key: "Jelly", value: 56, date: "2014/01/11" }, 
    {key: "Jelly", value: 59, date: "2014/01/12" }, 
    {key: "Jelly", value: 56, date: "2014/01/13" }, 
    {key: "Jelly", value: 52, date: "2014/01/14" }, 
    {key: "Jelly", value: 48, date: "2014/01/15" }, 
    {key: "Jelly", value: 47, date: "2014/01/16" }, 
    {key: "Jelly", value: 48, date: "2014/01/17" }, 
    {key: "Jelly", value: 45, date: "2014/01/18" }, 
    {key: "Jelly", value: 43, date: "2014/01/19" }, 
    {key: "Jelly", value: 41, date: "2014/01/20" }, 
    {key: "Jelly", value: 37, date: "2014/01/21" }, 
    {key: "Jelly", value: 36, date: "2014/01/22" }, 
    {key: "Jelly", value: 39, date: "2014/01/23" }, 
    {key: "Jelly", value: 41, date: "2014/01/24" }, 
    {key: "Jelly", value: 42, date: "2014/01/25" }, 
    {key: "Jelly", value: 40, date: "2014/01/26" }, 
    {key: "Jelly", value: 43, date: "2014/01/27" }, 
    {key: "Jelly", value: 41, date: "2014/01/28" }, 
    {key: "Jelly", value: 39, date: "2014/01/29" }, 
    {key: "Jelly", value: 40, date: "2014/01/30" }, 
    {key: "Jelly", value: 39, date: "2014/01/31" } 
]; 
var w = 800; 
var h = 450; 
var margin = { 
    top: 58, 
    bottom: 100, 
    left: 80, 
    right: 40 
}; 
var width = w - margin.left - margin.right; 
var height = h - margin.top - margin.bottom; 

var svg = d3.select("body").append("svg") 
      .attr("id", "chart") 
      .attr("width", w) 
      .attr("height", h); 
var chart = svg.append("g") 
      .classed("display", true) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
var dateParser = d3.timeParse("%Y/%m/%d"); 

var x = d3.scaleLinear() 
      .domain(d3.extent(data, function(d){ 
       var date = dateParser(d.date); 
       return date 
      })) 
      .range([0, width]) 

var y = d3.scaleLinear() 
      .domain([0, d3.max(data, function(d){ 
       return d.value 
      })]) 
      .range([height, 0]) 

var xAxis = d3.axisBottom(x).ticks(7) 

var yAxis = d3.axisLeft(y).ticks(5); 

function plot(params){ 
    //create axis for x and y 
    this.append("g") 
     .classed("x axis", true) 
     .attr("transform", "translate(0," + height + ")") 
     .call(params.axis.x); 
    this.append("g") 
     .classed("y axis", true) 
     .attr("transform", "translate(0,0)") 
     .call(params.axis.y); 

    //enter() 
    this.selectAll(".point") 
     .data(params.data) 
     .enter() 
      .append("circle") 
      .classed("point", true) 
      .attr("r", 2); 
    //update 
    this.selectAll(".point") 
     .attr("cx", function(d){ 
      var date = dateParser(d.date); 
      return x(date); 
     }) 
     .attr("cy", function(d){ 
      return y(d.value); 
     }) 
    //exit() 
    this.selectAll(".point") 
     .data(params.data) 
     .exit() 
     .remove(); 
} 

plot.call(chart, { 
    data: data, 
    axis: { 
    x: xAxis, 
    y: yAxis 
    } 
});

来源

2016-09-28 Alejandro

使用d3.v4与以前的版本有一些变化。如果您在轴上有日期字段，请使用d3.scaleTime()。用日期解析器解析日期。

var data = [ 
 
\t {key: "Jelly", value: 60, date: "2014/01/01" }, 
 
\t {key: "Jelly", value: 58, date: "2014/01/02" }, 
 
\t {key: "Jelly", value: 59, date: "2014/01/03" }, 
 
\t {key: "Jelly", value: 56, date: "2014/01/04" }, 
 
\t {key: "Jelly", value: 57, date: "2014/01/05" }, 
 
\t {key: "Jelly", value: 55, date: "2014/01/06" }, 
 
\t {key: "Jelly", value: 56, date: "2014/01/07" }, 
 
\t {key: "Jelly", value: 52, date: "2014/01/08" }, 
 
\t {key: "Jelly", value: 54, date: "2014/01/09" }, 
 
\t {key: "Jelly", value: 57, date: "2014/01/10" }, 
 
\t {key: "Jelly", value: 56, date: "2014/01/11" }, 
 
\t {key: "Jelly", value: 59, date: "2014/01/12" }, 
 
\t {key: "Jelly", value: 56, date: "2014/01/13" }, 
 
\t {key: "Jelly", value: 52, date: "2014/01/14" }, 
 
\t {key: "Jelly", value: 48, date: "2014/01/15" }, 
 
\t {key: "Jelly", value: 47, date: "2014/01/16" }, 
 
\t {key: "Jelly", value: 48, date: "2014/01/17" }, 
 
\t {key: "Jelly", value: 45, date: "2014/01/18" }, 
 
\t {key: "Jelly", value: 43, date: "2014/01/19" }, 
 
\t {key: "Jelly", value: 41, date: "2014/01/20" }, 
 
\t {key: "Jelly", value: 37, date: "2014/01/21" }, 
 
\t {key: "Jelly", value: 36, date: "2014/01/22" }, 
 
\t {key: "Jelly", value: 39, date: "2014/01/23" }, 
 
\t {key: "Jelly", value: 41, date: "2014/01/24" }, 
 
\t {key: "Jelly", value: 42, date: "2014/01/25" }, 
 
\t {key: "Jelly", value: 40, date: "2014/01/26" }, 
 
\t {key: "Jelly", value: 43, date: "2014/01/27" }, 
 
\t {key: "Jelly", value: 41, date: "2014/01/28" }, 
 
\t {key: "Jelly", value: 39, date: "2014/01/29" }, 
 
\t {key: "Jelly", value: 40, date: "2014/01/30" }, 
 
\t {key: "Jelly", value: 39, date: "2014/01/31" } 
 
]; 
 
var w = 300; 
 
var h = 250; 
 
var margin = { 
 
\t top: 58, 
 
\t bottom: 100, 
 
\t left: 80, 
 
\t right: 40 
 
}; 
 
var width = w - margin.left - margin.right; 
 
var height = h - margin.top - margin.bottom; 
 

 
var svg = d3.select("body").append("svg") 
 
\t \t \t .attr("id", "chart") 
 
\t \t \t .attr("width", w) 
 
\t \t \t .attr("height", h); 
 

 
var chart = svg.append("g") 
 
\t \t \t .classed("display", true) 
 
\t \t \t .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var dateParser = d3.timeParse("%Y/%M/%d"); 
 

 
var x = d3.scaleTime() 
 
      .domain(d3.extent(data, function(d){ var date = dateParser(d.date); return date })) 
 
      .range([0, width]) 
 

 
var y = d3.scaleLinear() 
 
      .domain([0, d3.max(data, function(d){ 
 
       return d.value 
 
      })]) 
 
      .range([height, 0]) 
 

 
var xAxis = d3.axisBottom(x).ticks(7) 
 

 
var yAxis = d3.axisLeft(y).ticks(5); 
 

 
function plot(params){ 
 
    //create axis for x and y 
 
\t this.append("g") 
 
\t \t .classed("x axis", true) 
 
\t \t .attr("transform", "translate(0," + height + ")") 
 
\t \t .call(params.axis.x); 
 
\t this.append("g") 
 
\t \t .classed("y axis", true) 
 
\t \t .attr("transform", "translate(0,0)") 
 
\t \t .call(params.axis.y); 
 
    
 
\t //enter() 
 
\t this.selectAll(".point") 
 
\t \t .data(params.data) 
 
\t \t .enter() 
 
\t \t \t .append("circle") 
 
\t \t \t .classed("point", true) 
 
\t \t \t .attr("r", 2); 
 
\t //update 
 
\t this.selectAll(".point") 
 
\t \t .attr("cx", function(d){ 
 
\t \t \t var date = dateParser(d.date); 
 
\t \t \t return x(date); 
 
\t \t }) 
 
\t \t .attr("cy", function(d){ 
 
\t \t \t return y(d.value); 
 
\t \t }) 
 
\t //exit() 
 
\t this.selectAll(".point") 
 
\t \t .data(params.data) 
 
\t \t .exit() 
 
\t \t .remove(); 
 
} 
 

 
plot.call(chart, { 
 
\t data: data, 
 
    axis: { 
 
    x: xAxis, 
 
    y: yAxis 
 
    } 
 
});

\t \t \t body,html{ 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t padding: 0; 
 
\t \t \t \t font-family: "Arial", sans-serif; 
 
\t \t \t \t font-size: 0.95em; 
 
\t \t \t \t text-align: center; 
 
\t \t \t } 
 
\t \t \t #chart{ 
 
\t \t \t \t background-color: #F5F2EB; 
 
\t \t \t \t border: 1px solid #CCC; 
 
\t \t \t } 
 
\t \t \t .bar{ 
 
\t \t \t \t fill: purple; 
 
\t \t \t \t shape-rendering: crispEdges; 
 
\t \t \t } 
 
\t \t \t .bar-label{ 
 
\t \t \t \t fill: black; 
 
\t \t \t \t text-anchor: middle; 
 
\t \t \t \t font-size: 18px; 
 
\t \t \t } 
 
\t \t \t .axis path, 
 
\t \t \t .axis line{ 
 
\t \t \t \t fill: none; 
 
\t \t \t \t stroke: #000; 
 
\t \t \t \t shape-rendering: crispEdges; 
 
\t \t \t } 
 
\t \t \t .gridline path, 
 
\t \t \t .gridline line{ 
 
\t \t \t \t fill: none; 
 
\t \t \t \t stroke: #ccc; 
 
\t \t \t \t shape-rendering: crispEdges; 
 
\t \t \t }

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

来源

2016-09-28 06:02:34

真棒，我不知道timescale..many的感谢！ – Alejandro

@Alejandro快乐编码.... –

在代码回首，忘了格式化

变种XAXIS = d3.axisBottom（X） .ticks（7） .tickFormat（d3.timeFormat（ “％米/％d”））;

来源

2016-09-28 05:59:51 Alejandro

d3.js - 轴标签帮助（从v3到v4）

回答

相关问题