Question

我将X轴显示年份。但是，它不起作用，我的cx值为0。我猜测d3.timeFormat解析年份值有问题。

//d3.format year as yyyy
let dateFormat = d3.timeFormat("%Y");

//Define x and y scale range
let xScale = d3.scaleTime()
    .range([0, width])

//Define x and y axis
let xAxis = d3.axisBottom(xScale)
    .ticks(10)
    .tickFormat(d =>
        dateFormat(d))

xScale.domain(d3.extent(data, d => 
        dateFormat(d.year)
        ))

let circles = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle");

circles
        .attr("cx", d =>
            xScale(dateFormat(+d.year)))
        .attr("cy", d =>
            yScale(d.emissions))
        .attr("r", 4)
        .style("fill", "blue")

当前输出：

所需的输出：

Codepen

Answer 1

d3.timeParse是您要寻找的。

由于>> pkg list Package Name | Version | Installation directory --------------------+---------+----------------------- arduino | 0.2.0 | /home/neon/octave/arduino-0.2.0 instrument-control | 0.3.1 | /home/neon/octave/instrument-control-0.3.1 >> pkg load arduino >> arduinosetup('arduinobinary', '/opt/arduino/arduino') Running "/opt/arduino/arduino" "/tmp/oct-yktW7j/octave/octave.ino" Picked up JAVA_TOOL_OPTIONS: java.lang.Error: Cannot load com.sun.java.swing.plaf.gtk.GTKLookAndFeel at javax.swing.UIManager.initializeDefaultLAF(UIManager.java:1351) at javax.swing.UIManager.initialize(UIManager.java:1459) at javax.swing.UIManager.maybeInitialize(UIManager.java:1426) at javax.swing.UIManager.getLookAndFeel(UIManager.java:492) at processing.app.linux.GTKLookAndFeelFixer.installGtkPopupBugWorkaround(GTKLookAndFeelFixer.java:79) at processing.app.linux.Platform.setLookAndFeel(Platform.java:44) at processing.app.Base.<init>(Base.java:239) at processing.app.Base.main(Base.java:145) ans = 0 >>仅由数字组成的data，因此您必须使用year将其解析为完整日期。方法如下：

定义解析器：d3.timeParse
根据以上内容解析数据：
```
let parseDate = d3.timeParse("%Y")
```
当您只想打印年份时，data.forEach(function (d) { d.year = parseDate(d.year); });会变为：tickFormat（Date.getFullYear）。

这是您的Codepen的分支： https://codepen.io/shashank2104/pen/MzaoZp

希望这会有所帮助。

Answer 2

确保data.year的类型是JavaScript date数据类型。添加如下所示的for循环...

//Fetch data using promises
d3.json("https://api.myjson.com/bins/122bwe").then(data => {
    console.log(data);

// ADD THIS after the line above!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
for(var i = 0; i < data.length; i++)
    data[i].year = new Date(data[i].year, 1, 1);

Answer 3

您的JSON数据（来自CodePen）已返回以年为单位的年份，即INSERT INTO analytics_events (person_id,other_person_id,location_id,location_name,date,action,type,info,created_at,updated_at) ...您无需格式化它们。而且无论如何，您的dateFormat函数需要一个完整的日期，而不能仅用一年的时间。

只需删除1996函数及其所有引用，即可获得预期的结果。

这是更新的工作代码笔：https://codepen.io/anon/pen/pQjzam

Answer 4

如前所述，JSON数据已经以年（数字）形式返回年。无需解析。但是d3.format需要tickFormat。

1。xScale.domain变为：

xScale.domain(d3.extent(data, d => 
    d.year
    ))

2。cx：

.attr("cx", d =>
            xScale(d.year))

2。tickFormat因此：

.tickFormat(d3.format(""))

d3.timeScale（）X轴不显示年份

4 个答案: