[英]How to filter series in d3js/dimplejs charts?
我想使d3js / dimplejs圖表成為響應式/交互式的。 我想根據“傳奇”中的點擊過濾“系列”。 我嘗試如下。 但這並沒有像我預期的那樣隱藏“系列”。 這對“氣泡”圖很有用。
var svg = dimple.newSvg("#chartContainer", 700, 450);
data = [
{
"Standby Date":"01-DEC-2013 00:00:00",
"Value type":"Actual",
"Value":118,
"Code":"code1"
},
{
"Standby Date":"01-DEC-2013 00:00:00",
"Value type":"Planned",
"Value":74,
"Code":"code1"
},
{
"Standby Date":"02-DEC-2013 00:00:00",
"Value type":"Actual",
"Value":128,
"Code":"code2"
},
{
"Standby Date":"02-DEC-2013 00:00:00",
"Value type":"Planned",
"Value":157,
"Code":"code2"
},
{
"Standby Date":"03-DEC-2013 00:00:00",
"Value type":"Actual",
"Value":142,
"Code":"code3"
},
{
"Standby Date":"03-DEC-2013 00:00:00",
"Value type":"Planned",
"Value":154,
"Code":"code3"
}
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 40, 490, 320)
var x = myChart.addTimeAxis("x", "Standby Date", "%d-%b-%Y %H:%M:%S", "%d-%b");
var y = myChart.addMeasureAxis("y","Value");
var s = myChart.addSeries("Value type", dimple.plot.area);
s.lineMarkers = true;
var myLegend = myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
myChart.legends = [];
var filterValues = dimple.getUniqueValues(data, "Value type");
myLegend.shapes.selectAll("rect")
.on("click", function (e) {
var hide = false;
var newFilters = [];
filterValues.forEach(function (f) {
if (f === e.aggField.slice(-1)[0]) {
hide = true;
} else {
newFilters.push(f);
}
});
if (hide) {
d3.select(this).style("opacity", 0.2);
} else {
newFilters.push(e.aggField.slice(-1)[0]);
d3.select(this).style("opacity", 0.8);
}
filterValues = newFilters;
myChart.data = dimple.filterData(data, "Value type", filterValues);
myChart.draw(800);
});
我也想用“代碼”過濾圖表。 傳奇有可能通過它嗎? 或任何其他可能的方式?
我沒有使用過dimple.js,但是對dc.js http://dc-js.github.io/dc.js/印象深刻。 與dimple一樣,dc.js是一個庫,提供了使用d3.js制作圖表的便捷方法。 更重要的是,dc.js旨在提供響應式圖表,該圖表可在用戶交互過濾基礎數據集時動態更新。 dc.js在Crossfilter( http://square.github.io/crossfilter/ http://blog.rusty.io/2012/09/17/crossfilter-tutorial/)的頂部構建交互式圖表。 Crossfitler提供了以編程方式對客戶端上的數據行進行排序,過濾和聚合的功能。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.