Question

我一直在使用d3，现在正在探索酒窝。我正在尝试创建一些饼图。但是，我希望x-axis value成为实际值的子集。

这就是我所拥有的：

    var svg = dimple.newSvg("body", 800, 600);

//data
    var data = [{"Inst":"Two", "Finaid":"Grant", "Value":50},
                {"Inst":"Two","Finaid":"None", "Value":10},
                {"Inst":"Two","Finaid":"No", "Value": 30},
                {"Inst":"One", "Finaid":"Grant", "Value":20},
                {"Inst":"One","Finaid":"None", "Value":10},
                {"Inst":"One","Finaid":"No", "Value": 30}];

//basic chart
    var chart = new dimple.chart(svg, data);
    console.log(data);
    chart.setBounds(50,20,460,360)
    chart.addCategoryAxis("y", "Inst")
    chart.addMeasureAxis("x", "Value");
    chart.addMeasureAxis("p", "Value");
    chart.addMeasureAxis("z", "Value");
    chart.addSeries("Finaid", dimple.plot.pie);
    chart.addLegend(600,20,90,300, "left");
    chart.draw();

所以这样做有效，但我希望x-axis value只是"Finaid":"Grant"的值chart.addMeasureAxis("x", {"Finaid":"Grant"}.Value); ...虽然我发现实际的代码什么也没做。

有什么建议吗？感谢

Answer 1

在绘图前过滤它。事实上，dimple.js甚至为此提供了helpful function。

var data = [{"Inst":"Two", "Finaid":"Grant", "Value":50},
            {"Inst":"Two","Finaid":"None", "Value":10},
            {"Inst":"Two","Finaid":"No", "Value": 30},
            {"Inst":"One", "Finaid":"Grant", "Value":20},
            {"Inst":"One","Finaid":"None", "Value":10},
            {"Inst":"One","Finaid":"No", "Value": 30}];

var filteredData = dimple.filterData(data, "Finaid", "Grant");

// now make chart
var chart = new dimple.chart(svg, filteredData);

X值的凹坑滤波器

1 个答案: