Question

有关完整示例，请参阅： http://jsfiddle.net/qQ5WN/2/

var data = [
        { "Date": "16/08/1906", "Magnitude": 8.2 },
        ... etc ...
];

var chart = new dimple.chart(svg, data);
var x = chart.addTimeAxis("x", "Date", "%d/%m/%Y","%Y");
var y = chart.addMeasureAxis("y", "Magnitude");
var s = chart.addSeries(['Date','Magnitude'], dimple.plot.bubble);

x.timePeriod    = d3.time.years;
x.timeInterval  = 10;

y.tickFormat = ',.1f';

chart.draw();

x.tickFormat = "%a %e %b %Y";

此示例是一小组地震数据 - 日期（时间轴）和幅度（测量）。

要求是：

标准散点图行为 - 如果在同一天发生两次地震，则将它们分开绘制而不是一起添加到一个较大的事件中 - 因此将addSeries（）分解参数中的两个系列组合起来
输入日期格式为％d /％m /％Y，但应在工具提示中显示为＆＃39;％a％e％b％Y＆＃39; （1960年5月22日太阳）但仅在X轴上刻度为1960（％Y）。

然而，只要我启用分解 - addSeries（null，...）就会消失问题 - 当您将鼠标悬停在数据点上时，工具提示中会显示两次日期，一次输入JSON样式，输出一次输出。（如果你摆脱了最后的.tickformat声明，它仍然存在两次，但是％Y。

我可以阻止这个吗？

感谢。

Answer 1

这里的问题是每个轴和系列都为工具提示提供数据点，然后消除任何重复。因为有两种不同的日期格式，所以它们错误地将它们视为不同的值并显示两者。我能想到避免它的唯一方法是预先格式化你的日期：

var parser =  d3.time.format("%d/%m/%Y"),
    formatter = d3.time.format("%a %e %b %Y");

data.forEach(function (d) {
    d["Date"] = formatter(parser.parse(d["Date"]));
}, this);

然后在设置时间轴时需要使用这种新格式：

var x = chart.addTimeAxis("x", "Date", "%a %e %b %Y","%Y");

你仍然需要这一行：

x.tickFormat = "%a %e %b %Y";

这是因为x轴仍然默认提供日期格式为％Y。这有点痛苦，但我认为这是一个不寻常的案例。这是你的小提琴的更新：

http://jsfiddle.net/qQ5WN/3/

我希望有帮助

约翰

dimple.js - scatter-plot，系列在工具提示中列出两次

1 个答案: