Javascript 有关条形图的基本问题

我试图将两个共享相同x轴但不同y轴的条形图与json文件关联起来。我在这里遵循了多焦点示例：

但是，在我的数据集中，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();
});

---

顺序比例条形图通常与范围/焦点不兼容。这是可能的，但它的工作。如果你真的希望一个范围图有多个焦点图，那么结合这两个例子需要做一些工作，因为这两个功能都不是内置的。谢谢。是否有支持所有这些功能的库？我可以换成别的东西，因为我还处在这个过程的早期，你可以试试Vega Lite。它具有内置的交叉过滤器和范围/焦点功能。不过我还没有试过顺序范围/焦点。戈登，谢谢你的建议。我不知道vega lite，我能够实现它，并得到了一个工作原型。我所需要的只是简单地实现范围/焦点特性，因为我正在以我需要的格式向它提供由Python代码生成的Json数据。Vega lite工作得很好。与d3/dc相比，唯一的缺点是缺乏进入/退出动画，我可以不使用。顺序比例条形图通常与范围/焦点不兼容。这是可能的，但它的工作。如果你真的希望一个范围图有多个焦点图，那么结合这两个例子需要做一些工作，因为这两个功能都不是内置的。谢谢。是否有支持所有这些功能的库？我可以换成别的东西，因为我还处在这个过程的早期，你可以试试Vega Lite。它具有内置的交叉过滤器和范围/焦点功能。不过我还没有试过顺序范围/焦点。戈登，谢谢你的建议。我不知道vega lite，我能够实现它，并得到了一个工作原型。我所需要的只是简单地实现范围/焦点特性，因为我正在以我需要的格式向它提供由Python代码生成的Json数据。Vega lite工作得很好。与d3/dc相比，唯一的缺点是缺少我可以不用的进入/退出动画。