Question

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

目前，以工具提示的形式显示：在[对象]期间，P1 [对象对象]

（期间和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来解决这些问题吗？任何方法/反馈都受到高度赞赏

Answer 1

每当缩小创建对象而不是直接值时，您需要指定.title函数以使内置工具提示正常工作。

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

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

请注意，默认情况下，标题从复合图表共享到子图表（取决于shareTitle）。这里要考虑的棘手问题是该函数是在父图表中定义的，因此如果共享标题，该函数将使用父项的keyAccessor和valueAccessor，这就是您的{{{孩子们没有任何影响。

DC js复合图表工具提示

1 个答案: