Javascript 使用行图表作为图例突出显示折线图

这在dc.js用户组上被询问了2到3次，但从未得到回答

我有一个类似的图表设置

我希望使用行图表上的条形图，而不是使用图例来突出显示复合图表上的线条。因此，每当用户将鼠标悬停在标记为A的条上时，A的线就会以与将鼠标悬停在标记为A的图例上时相同的方式高亮显示

在cd.js源代码中，我发现了鼠标悬停事件和legendHighlightd函数，但我无法找到一种方法让它们在我的行和复合图表之间工作

你有什么办法让它发挥作用吗

这里是Fiddle的代码：

    var data = [
        {date: "01/10/2013", Site: "A", Value: 50, Uptime: 0.80},
        {date: "01/10/2013", Site: "B", Value: 42, Uptime: 0.76},
        {date: "01/10/2013", Site: "C", Value: 68, Uptime: 0.84},
        {date: "01/10/2013", Site: "D", Value: 52, Uptime: 0.79},
        {date: "02/10/2013", Site: "A", Value: 49, Uptime: 0.80},
        {date: "02/10/2013", Site: "B", Value: 48, Uptime: 0.78},
        {date: "02/10/2013", Site: "C", Value: 61, Uptime: 0.85},
        {date: "02/10/2013", Site: "D", Value: 58, Uptime: 0.77},
        {date: "03/10/2013", Site: "A", Value: 48, Uptime: 0.83},
        {date: "03/10/2013", Site: "B", Value: 45, Uptime: 0.89},
        {date: "03/10/2013", Site: "C", Value: 49, Uptime: 0.91},
        {date: "03/10/2013", Site: "D", Value: 53, Uptime: 0.92},
        {date: "04/10/2013", Site: "A", Value: 42, Uptime: 0.82},
        {date: "04/10/2013", Site: "B", Value: 38, Uptime: 0.76},
        {date: "04/10/2013", Site: "C", Value: 61, Uptime: 0.83},
        {date: "04/10/2013", Site: "D", Value: 78, Uptime: 0.68}
    ]

var ndx = crossfilter(data)

var parseDate = d3.time.format("%d/%m/%Y").parse;

data.forEach(function (d) {
    d.date = parseDate(d.date);
});

//Dimensions
var dateDim = ndx.dimension(function (d) {
    return d.date;
});
var siteDim = ndx.dimension(function (d) {
    return d.Site;
});
siteGroup = siteDim.group();
var Value = dateDim.group().reduceSum(function (d) {
    return d.Value
});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

// Gets all the site names
sites = [];
groupToParse = eval(siteGroup).top(Infinity);
for(var i in groupToParse){
    sites.push(groupToParse[i]["key"]);
}
sites.sort();

valueBySite = siteDim.group().reduceSum(function(d){
    return d.Value;
});

/*****************
Uptime line chart
*****************/

var site_uptime_Ave = dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);

avgBySite = [];
for(var i in sites){
    avgBySite[i] = dateDim.group().reduce(
        function(inSite){
            return function (p, v) {
                if(inSite == v.Site){
                    p.total += v.Uptime;
                    ++p.count;
                    p.average = d3.round((p.total / p.count), 2);
                }return p;
            };
        }(sites[i]),

        function(inSite){
            return function (p, v) {
                if(inSite == v.Site){
                    p.total -= v.Uptime;
                    --p.count;
                    p.average = d3.round((p.total / p.count), 2);
                }return p;
            };
        }(sites[i]),
        reduceInitial
        );
}

var uptimeLineChart = dc.compositeChart("#chart-line-uptime");

composites = []
for(var i in avgBySite){
    composites[i] = dc.lineChart(uptimeLineChart)
                      .group(avgBySite[i], sites[i])
    .valueAccessor(function(p){
        return p.value.average;  
    });
}

uptimeLineChart.width(500).height(200)
    .dimension(dateDim)
    .legend(dc.legend().x(0).y(0).gap(5))
    .x(d3.time.scale().domain([minDate, maxDate]))
    .brushOn(false)
    .margins( {top: 10, left: 50, right: 10, bottom: 50 })
    //.elasticY(true)
    .shareColors(true)
    .compose(composites);

//------------------------------------
// Row chart
//------------------------------------
theRowChart = dc.rowChart("#chart-row-value");
theRowChart.width(500).height(200)
           .dimension(siteDim)
           .group(valueBySite);



// Render charts
dc.renderAll();



print_filter(valueBySite);

// Functions for reduce to give an average
function reduceAdd(p, v) {
    p.total += v.Uptime;
    ++p.count;
    p.average = d3.round((p.total / p.count), 2);
    return p;
}

function reduceRemove(p, v) {
    p.total -= v.Uptime;
    --p.count;
    p.average = d3.round((p.total / p.count), 2);
    return p;
}

function reduceInitial() {
    return {
        total: 0,
        count: 0,
        average: 0,
    };
}

// Prints a filter
function print_filter(filter) {
    var f = eval(filter);
    if (typeof (f.length) != "undefined") {} else {}
    if (typeof (f.top) != "undefined") {
        f = f.top(Infinity);
    } else {}
    if (typeof (f.dimension) != "undefined") {
        f = f.dimension(function (d) {
            return "";
        }).top(Infinity);
    } else {}
    console.log(filter + "(" + f.length + ") = " + JSON.stringify(f).replace("[", "[\n\t").replace(/}\,/g, "},\n\t").replace("]", "\n]"));
}

---

您可能需要使用vanilla d3.js来实现这一点。你会有更多的控制权。您需要做的就是在每个栏中添加一个mouseover事件，比如.onmouseover，函数{}。您可以在中看到这一点，但这是一个点击事件。@user1614080 outlines方法将与dc.js同样有效，因为dc只是d3上的一个泄漏抽象。它将启动图表。选择AllRect.bar.onmouseover。。。如果你能指出前面的讨论会有帮助。