Question

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

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

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

这是组件中图形的初始化。

数据经过格式化过程，在此我使用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/

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

1 个答案: