我正在尝试使用D3和dimple.js创建一个交互式图表。我在x轴上有两个序数变量,在y轴上有两个标称变量。本质上,我想创建四个图表并在同一SVG中在它们之间交替。因此x1-y1将首先出现,然后在执行某个操作(即,鼠标单击)之后,它将转换为x1-y2或x2-y1或x2-y2。
我相信我已经解决了从x1-y1到x1-y2的过渡,更改了标称y轴信息。但是,我在切换序数x轴时遇到问题。
var myChart1 = new dimple.chart(svg1, data);
var xAxis = myChart1.addCategoryAxis("x", "height");
xAxis.addOrderRule("height");
var yAxis = myChart1.addMeasureAxis("y", "avg");
myChart1.addSeries(null, dimple.plot.bar)
.aggregate = dimple.aggregateMethod.avg;
myChart1.setBounds(padding,padding,w - padding,h - padding);
myChart1.draw();
var physical = ['Height - HR', 'Height - AVG', 'Weight - HR', 'Weight - AVG']
d3.select("#set1").selectAll("p")
.data(physical)
.enter()
.append("p")
.text(function(d) { return d; })
.attr("class","buttons1")
.on("click",function(d) {
if (d == 'Height - HR') {
xAxis.categoryFields = "height";
yAxis.measure = "HR";
myChart1.draw(1000);
} else if (d == 'Height - AVG') {
xAxis.categoryFields = "height";
yAxis.measure = "avg";
myChart1.draw(1000);
} else if (d == "Weight - HR") {
xAxis.categoryFields = "weight";
yAxis.measure = "HR";
myChart1.draw(1000);
} else if (d == 'Weight - AVG') {
xAxis.categoryFields = "weight";
yAxis.measure ="avg";
myChart1.draw(1000);
}
});
我在dimple.js文档上了解了有关使用dimple.axis.measure的信息。除了categoryFields.push方法之外,我没有找到任何有关更新categoryField的信息。如果您可以推动并创建新类别,那么您将无法替换它们吗?调试器给我这个错误
TypeError: a.categoryFields.forEach is not a function
如果有帮助。