堆栈内存溢出
  简体   繁体   English

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

[英]d3.js — Axis label help (from v3 to v4)

 原文  2016-09-28 04:31:49  5   2    javascript/ d3.js

问题描述

I am taking an online tutorial on D3.js. 我正在参加D3.js的在线教程。 Since the version 4 recently came out, there are some things in the old version that wont support in version 4. I've been looking at their github to look for comparison. 自从版本4最近发布以来，旧版本中有一些东西在版本4中不支持。我一直在寻找他们的github来寻找比较。

Anyway I am stumped on this part of lesson -- labeling the axis on a graph. 无论如何，我对课程的这一部分感到困惑 - 在图表上标记轴。

Here's a working code in version 3: 这是版本3中的工作代码：

Version3 版本3

Here's my attempt in version 4: 这是我在第4版中的尝试：

Version4--not working 版本4 - 不工作

version 3 版本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
    }
});

version 4 版本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
  }
});

2 个解决方案

解决方案1
 2  2016-09-28 05:59:51

Looking back at the code, I forgot to format it 回头看代码，我忘了格式化

var xAxis = d3.axisBottom(x) .ticks(7) .tickFormat(d3.timeFormat("%m/%d")); var xAxis = d3.axisBottom（x）.ticks（7）.tickFormat（d3.timeFormat（“％m /％d”））;

解决方案2
 1 已采纳  2016-09-28 06:02:34

Using d3.v4 has some changes from the previous version. 使用d3.v4与以前的版本有一些变化。 If you have a date field in axis, go with d3.scaleTime() . 如果轴上有日期字段，请使用d3.scaleTime（） 。 Parse the date with the date parser. 使用日期解析器解析日期。 

 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 } }); 
  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; } 
 <script src="https://d3js.org/d3.v4.js"></script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从D3.js v3迁移到D3.js v4无法正常工作 - 选择问题？ - Migrating from D3.js v3 to D3.js v4 not working - a select issue? d3.js - v3 和 v4 - 输入和更新差异 - d3.js - v3 and v4 - Enter and Update differences d3.js 升级力布局从 v3 到 v4 - d3.js Upgrading Force layout from v3 to v4 从 D3.js V3 迁移到 V4（及更高版本）svg.append 上的错误 - Migrating from D3.js V3 to V4 (and beyond) Error on svg.append d3.js从v3更新到v5 - d3.js updating from v3 to v5 D3.js 路径在 V3 和 V4 中走向不同的方向 - D3.js path goes in different directions in V3 vs V4 D3.js V4迁移问题 - D3.js V4 migration issue 在d3.js v4中重新绑定导出 - Rebinding exports in d3.js v4 d3.js v4 timeParse（）不工作？ - d3.js v4 timeParse() not working? d3.js v4 - 嵌套选择 - d3.js v4 - Nested Selections
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM