DC js 复合图表工具提示

Question

我使用 dc 和 crossfilter js 绘制了多个链接在一起的图表。最后一张图表是复合图表（条形图和折线图）我无法在其上正确获得工具提示。

目前以tooltip的形式显示：During [object object], P1[object object]

(During和P1是我的尺寸)

我的代码：

//Composite chart to show 2 metrics
    chart4
    .width(990) // (optional) define chart width, :default = 200
    .height(200) // (optional) define chart height, :default = 200
    .transitionDuration(500) // (optional) define chart transition duration, :default = 500
    // (optional) define margins
    .margins({top: 10, right: 50, bottom: 30, left: 40})
    .dimension(dateDimension) // set dimension
    .group(rechfreqGroup) // set group
    // (optional) whether chart should rescale y axis to fit data, :default = false
    .elasticY(true)
    // (optional) when elasticY is on whether padding should be applied to y axis domain, :default=0
    .yAxisPadding(100)
    // (optional) whether chart should rescale x axis to fit data, :default = false
    //.elasticX(true)
    // (optional) when elasticX is on whether padding should be applied to x axis domain, :default=0
    .xAxisPadding(500)
    // define x scale
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    // (optional) render horizontal grid lines, :default=false
    .renderHorizontalGridLines(true)
    // (optional) render vertical grid lines, :default=false
    .renderVerticalGridLines(true)
    // compose sub charts, currently composite chart only supports line chart & bar chart
    ._rangeBandPadding(1) //workaround to fix visual stuff (dc js issues)
    .compose([

        dc.barChart(chart4).group(rechrevGroup).gap(2).centerBar(true).valueAccessor(function (p) {
        return p.value.count > 0 ? p.value.rechtotal / p.value.count : 0;
        }),
        // you can even include stacked bar chart or line chart in a composite chart
        dc.lineChart(chart4).group(rechfreqGroup).useRightYAxis(true).colors('#000000').valueAccessor(function (p) {
        return p.value.count > 0 ? p.value.rechfreq / p.value.count : 0;
        })
    ])
    // (optional) whether this chart should generate user interactive brush to allow range
    // selection, :default=true.
    .brushOn(true);

我在这里错过了什么？我应该在这里使用 d3.tip 来解决这些问题吗？任何 approach/feedback 都受到高度赞赏

Answer 1

每当您的减少创建 objects 而不是直接值时，您将需要指定一个 .title 函数以使 built-in 工具提示正常工作。

这是因为默认的标题函数只打印键和值。

From the .title documentation:

// default title function just return the key
chart.title(function(d) { return d.key + ': ' + d.value; });

其实它更聪明一点：

var _title = function (d) {
    return _chart.keyAccessor()(d) + ': ' + _chart.valueAccessor()(d);
};

https://github.com/dc-js/dc.js/blob/develop/src/base-mixin.js#L45-L47

请注意，默认情况下，标题从综合图表共享到 child 个图表（取决于 shareTitle）。这里要考虑的棘手的事情是该函数是在 parent 图表中定义的，因此如果共享标题，该函数将使用 [=35= 的 keyAccessor 和 valueAccessor ]，这就是为什么你在 children 上的 valueAccessor 没有效果。

DC js 复合图表工具提示

DC js composite chart tooltip

javascript

tooltip

d3.js

dc.js