我正在尝试绘制一个添加了一系列图表和一个交互式图例的图表，但我希望图表加载的数据过滤到图例中的一个选项。这看起来像this，但在加载时只在图例中选择了一个选项。绘制图表后，我修改了图例逻辑，以在数据集之间切换，如单选按钮。以下是绘制图表的代码：
var data = $rootScope._diskUtilization[$scope.myOption];
var svg = dimple.newSvg("#disk-utilization-chart-container", 1000, 500);
var chart = new dimple.chart(svg, data);
chart.setMargins(65,10,80,65);
var x = chart.addCategoryAxis("x", ["x", "opCode"]);
var y = chart.addMeasureAxis("y", "y");
y.tickFormat = "%";
var opCodes = chart.addSeries("opCode", dimple.plot.bar);
var myLegend = chart.addLegend(940, 5, 60, 100, "Right");
if (data[0] != null){
chart.draw();
} else {
alert("no data for this chart on this disk");
}
var cleanAxis = function (axis, oneInEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// Leave the first label
var del = false;
// If there is an interval set
if (oneInEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text")
.each(function (d) {
// Remove all but the nth label
if (del % oneInEvery !== 0) {
this.remove();
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
}
del += 1;
});
}
}
};
cleanAxis(x, 2);
x.titleShape.text("Trace Time (seconds)");
y.titleShape.text("Utilization (%)");
chart.legends = [];
var filterValues = dimple.getUniqueValues(data, "opCode");
chart.data = dimple.filterData(data, "opCode", filterValues[0]);
myLegend.shapes.selectAll("rect").style("opacity", 0.2);
d3.select("rect.dimple-legend.dimple-legend-key.dimple-"+filterValues[0].toLowerCase()).style("opacity", 0.8);
for(i=1;i<filterValues;i++){
d3.select("rect.dimple-legend.dimple-legend-key.dimple-"+filterValues[i].toLowerCase()).style("opacity", 0.2);
}
var newFilters = filterValues[0];
myLegend.shapes.selectAll("rect")
.on("click", function (e) {
// loop through all opCodes for this chart on this disk
filterValues.forEach(function (f) {
// if this is the clicked opCode raise opacity and filter on this value
if (f === e.aggField.slice(-1)[0]) {
newFilters = f;
d3.select("rect.dimple-legend.dimple-legend-key.dimple-"+f.toLowerCase()).style("opacity", 0.8);
// for all other opCodes lower the opacity of the legend-rect
} else {
d3.select("rect.dimple-legend.dimple-legend-key.dimple-"+f.toLowerCase()).style("opacity", 0.2);
}
});
// Filter the data
chart.data = dimple.filterData(data, "opCode", newFilters);
// Passing a duration parameter makes the chart animate. Without
// it there is no transition
chart.draw(1000);
// rebuild the axis labels every time you redraw a chart
x.titleShape.text("Trace Time (seconds)");
y.titleShape.text("Utilization (%)");
});
在绘制图表之前，我曾尝试在数据过滤器中粘贴，但是图例也被过滤了，我失去了其他选项。这是我试图坚持的地方：
chart.data = dimple.filterData(data, "opCode", filterValues[0]);
提前感谢您的帮助。再次感谢John Kiernander建立这样一个令人敬畏的项目。
为清楚起见，这里是一个简化的样本数据集：
[{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":0,"y":0.0556},
{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":133,"y":0.0043},
{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":265,"y":0.0057},
{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":4245,"y":0.0014},
{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":4377,"y":0.0013},
{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":6897,"y":0.0258},
{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":13131,"y":0.0036},
{"disk":0,"chartName":"Disk Utilization","opCode":"Read","x":13131,"y":0.0189},
{"disk":0,"chartName":"Disk Utilization","opCode":"Write","x":1592,"y":0.0565},
{"disk":0,"chartName":"Disk Utilization","opCode":"Write","x":3183,"y":0.0249},
{"disk":0,"chartName":"Disk Utilization","opCode":"Write","x":3316,"y":0.0049},
{"disk":0,"chartName":"Disk Utilization","opCode":"Write","x":12999,"y":0.0041},
{"disk":0,"chartName":"Disk Utilization","opCode":"Write","x":13131,"y":0.0043},
{"disk":0,"chartName":"Disk Utilization","opCode":"Write","x":13131,"y":0.0253},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":0,"y":0.0762},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":133,"y":0.0131},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":265,"y":0.0211},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":1592,"y":0.187},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":1724,"y":0.0607},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":1857,"y":0.022},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":11540,"y":0.1017},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":13131,"y":0.0078},
{"disk":0,"chartName":"Disk Utilization","opCode":"Readwrite","x":13131,"y":0.0593}]
答案 0 :(得分：1)
我无法完全删除您的代码，以了解出现了什么问题。你看过这个例子了吗？
http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends
有评论可以解释为什么一切都在那里。避免图例重绘的关键是我看到的行chart.legends = []，所以我不确定程序流是否是问题。