Question

我正在尝试关联两个条形图，这些条形图与json文件共享相同的x轴但不同的y轴。我在这里遵循了多焦点示例： https://dc-js.github.io/dc.js/examples/multi-focus.html

但是，在我的数据集中，x轴将由字符串组成，因此我对代码进行了一些更改：注意刻度带和单位序数线。进行更改后，图表停止使用画笔工具，并且选择条形不再影响图表2。你能指出我在这里做错了吗？

var chart1 = new dc.BarChart("#test1");
var chart2 = new dc.BarChart("#test2");
d3.json('wells.json').then(function(perfandcost) {

perfandcost.forEach(function(x) {
    x.fpd = +x.fpd;
});

var ndx                 = crossfilter(perfandcost),
    wells        = ndx.dimension(function(d) {return d.wellname;}),
    wellsGroup       = wells.group().reduceSum(function(d) {return d.fpd / 1000;}),
    wellcostsGroup       = wells.group().reduceSum(function(d) {return d.twc / 1000000;});


function bar_chart_fpd(chart) {
    chart
        .width(900)
        .height(375)
      .x(d3.scaleBand())
      .xUnits(dc.units.ordinal)
        .dimension(wells)
        .ordinalColors(["rgba(253,175,75,0.7)"])
        .barPadding(0.2)
        .outerPadding(0.05)
        .renderHorizontalGridLines(true)
        .group(wellsGroup);
    return chart;
}

    function bar_chart_twc(chart) {
    chart
        // .width(900)
        .height(375)
      .x(d3.scaleBand())
      .xUnits(dc.units.ordinal)
        // .brushOn(true)

        // .yAxisLabel("This is the Y Axis!")
        .dimension(wells)
        .ordinalColors(["rgba(253, 175, 75, 0.7)"])
        .barPadding(0.2)
        .outerPadding(0.05)
        .renderHorizontalGridLines(true)
        // .useViewBoxResizing(true)
        .group(wellcostsGroup);
    return chart;
}

bar_chart_fpd(chart1)
  .brushOn(true)
bar_chart_twc(chart2);

function rangesEqual(range1, range2) {
    if (!range1 && !range2) {
        return true;
    }
    else if (!range1 || !range2) {
        return false;
    }
    else if (range1.length === 0 && range2.length === 0) {
        return true;
    }
    else if (range1[0].valueOf() === range2[0].valueOf() &&
        range1[1].valueOf() === range2[1].valueOf()) {
        return true;
    }
    return false;
}

chart1.focusCharts = function (chartlist) {
    if (!arguments.length) {
        return this._focusCharts;
    }
    this._focusCharts = chartlist; // only needed to support the getter above
    this.on('filtered', function (range_chart) {
        chartlist.forEach(function(focus_chart) {
            if (!rangesEqual(range_chart.filter(), focus_chart.filter())) {
                dc.events.trigger(function () {
                    focus_chart.focus(range_chart.filter());
                });
            }
        });
    });
    return this;
};

chart1.focusCharts([chart2]);
dc.renderAll();
});

有关条形图的基本问题

0 个答案: