如何在timeFormat d3中添加自定义值? [英] How to add Custom value in timeFormat d3?

问题描述

我有一个数据集，其日期指定为date

Q3 1954
Q4 1954
Q1 1955
Q2 1955
Q3 1955
Q4 1955
Q3 1955
Q4 1955
Q1 1956

我希望它在x轴上，并且每个日期都有对应的数据点.

在D3 v4中是否有一个timeFormat可以将这种日期系列指定到轴中?

解决方案

我发现使用scaleBand()可以解决此问题.

该轴的

代码段为

 var width = 800, height = 800;

var ydata = [10, 15, 20, 25, 30];
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var xaxis  = d3.scaleBand()
                .rangeRound([0, width])
                .padding(1);

d3.csv("static/date.csv", function(data){
        xaxis.domain(data.map(function(d) { return d.date; }))

        var x_axis = d3.axisBottom()
                        .scale(xaxis);

        var xAxisTranslate = height/2 + 10;

        svg.append("g")
        .attr("transform", "translate(50, " + xAxisTranslate  +")")
        .call(x_axis)
});

var yscale = d3.scaleLinear()
               .domain([0, d3.max(ydata)])
               .range([height/2, 0]);

var y_axis = d3.axisLeft()
               .scale(yscale);

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

我还从在此处输入链接描述

感谢@Cyril的时间.

I have a data set with dates specified as date

Q3 1954
Q4 1954
Q1 1955
Q2 1955
Q3 1955
Q4 1955
Q3 1955
Q4 1955
Q1 1956

I wanted this to be on the x-axis and with data points corresponding to each dates.

Is there a timeFormat to specify such kind of dates series into axis in D3 v4 ?

解决方案

I figured out using scaleBand() could solve this issue.

code snippet for this axis is

 var width = 800, height = 800;

var ydata = [10, 15, 20, 25, 30];
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var xaxis  = d3.scaleBand()
                .rangeRound([0, width])
                .padding(1);

d3.csv("static/date.csv", function(data){
        xaxis.domain(data.map(function(d) { return d.date; }))

        var x_axis = d3.axisBottom()
                        .scale(xaxis);

        var xAxisTranslate = height/2 + 10;

        svg.append("g")
        .attr("transform", "translate(50, " + xAxisTranslate  +")")
        .call(x_axis)
});

var yscale = d3.scaleLinear()
               .domain([0, d3.max(ydata)])
               .range([height/2, 0]);

var y_axis = d3.axisLeft()
               .scale(yscale);

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

I also found the documentation from enter link description here

Thanks @Cyril for time.

这篇关于如何在timeFormat d3中添加自定义值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！