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

Question

我正在参加D3.js的在线教程。自从版本4最近发布以来，旧版本中有一些东西在版本4中不支持。我一直在寻找他们的github来寻找比较。

无论如何，我对课程的这一部分感到困惑 - 在图表上标记轴。

这是版本3中的工作代码：

Version3

这是我在第4版的尝试：

Version4--not working

第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
  }
});

Answer 1

回顾代码，我忘了格式化

var xAxis = d3.axisBottom（x）                   .ticks（7）                   .tickFormat（d3.timeFormat（＆＃34;％米/％d＆＃34））;

Answer 2

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

＆＃13;

＆＃13;

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 = 300;
var h = 250;
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.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
	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
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;