dc.js 带条形和折线的复合图表。在栏上实现单选

Question

我正在尝试在 dc.js 复合图表上重新创建单个选择栏，如下所示

https://dc-js.github.io/dc.js/examples/bar-single-select.html

我尝试向子图表添加过滤器处理程序，但当我单击该栏时它从未被调用。我还尝试将过滤器处理程序添加到复合图表本身，但没有成功。有什么方法可以在复合图表上选择一个条形图，还是必须为其指定颜色，然后手动将其他条形图着色为灰色并根据单击的内容重新绘制图表？

这是我的组件中图表的初始化。

数据经过格式化过程，我使用 formatData 函数解析日期。我还传入了一个维度属性（为错误的命名道歉），它告诉组件哪种图表应该对应于图表名称和数据集的颜色。

dimensions={
    {"Data1": ["line", AppStyles.color.warning], 
     "Data2": ["line", AppStyles.color.danger], 
     "Data3": ["bar", AppStyles.color.blue]
    }
}

formatData = (data) => {
    let formattedData = [];
    for(let key in data) {
        formattedData.push({
            ...data[key],
            x: this.parseDate.parse(data[key].x)
        })
    }
    return formattedData;
}

componentDidMount(){
    let data = this.formatData(this.props.data);
    this.ndx = crossfilter.crossfilter(data);
    this.chart = dc.compositeChart(this.multiLineChartContainer);
    this.dimension = this.ndx.dimension((d) => {
        return d.x;
    });
    let minDate = this.dimension.bottom(1)[0].x;
    let maxDate = this.dimension.top(1)[0].x;

    let composeGroup = [];
    Object.keys(this.props.dimensions).map((dim,i) => {
        let grp = this.dimension.group().reduceSum((d) => {
            return d[dim];
        });
        if(this.props.dimensions[dim][0] === "bar"){
            composeGroup.push(dc.barChart(this.multiLineChartContainer)
            .group(grp, dim)
            .colors("blue")
            .centerBar(true)
            .addFilterHandler(function(filters, filter) {return [filter];})
            )
        } else {
            composeGroup.push(dc.lineChart(this.multiLineChartContainer)
            .group(grp, dim)
            .colors(this.props.dimensions[dim][1])
            .useRightYAxis(true)

        );
        }
    });

    this.chart.width(this.props.width)
    .height(this.props.height)
    .renderHorizontalGridLines(true)
    .x(d3.time.scale().domain([minDate, maxDate]))
    .elasticY(true)
    .elasticX(true)
    .xAxisLabel("Cohort")
    .brushOn(false)
    .yAxisLabel("Left")
    .rightYAxisLabel("Right")
    .xUnits(()=>{
        return 30;
    })
    .legend(dc.legend().x(this.chart.width()- 130))
    .compose(composeGroup)

    this.chart.renderlet((chart) => {
        chart.selectAll('circle, rect.bar').on("click", (event) => {
            this.props.dataSelect(event);
          });
    });
    this.chart.xAxis().ticks(5)
    this.chart.render();
}

Answer 1

下次您提出关于 SO 的问题时，请考虑添加您的代码（或者更好的是运行示例）。

这也有助于阐明“没有运气”的含义 - 错误的点击行为？根本没有图表显示？

很难猜出你可能出了什么问题。

这对我来说很好用，虽然序数比例有点棘手，将它们组合在一个复合图表中更是如此。

问题是您没有使用序数比例吗？因为目前选择的类型（画笔或点击）是由比例/xUnits决定的，很难绕过。

composite
    .width(768)
    .height(480)
    .x(d3.scaleOrdinal().domain(d3.range(1,21)))
    .xUnits(dc.units.ordinal)
    .yAxisLabel("The Y Axis")
    .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
    .brushOn(true)
    .renderHorizontalGridLines(true)
    .compose([
        dc.barChart(composite)
            .dimension(dim)
            .colors('blue')
            .group(grp2, "Bars")
            .addFilterHandler(function(filters, filter) {return [filter];})
            .centerBar(true),
        dc.lineChart(composite)
            .dimension(dim)
            .colors('red')
            .group(grp1, "Dots")
            .dashStyle([2,2])
        ])
    .render();

https://jsfiddle.net/gordonwoodhull/ronqfyj0/39/