使用行图作为图例在线图上突出显示

Question

（已在dc.js用户组中询问过2次或3次但从未回答过）

我的图表设置类似于this。

我不想使用图例突出显示复合图表上的线条，而是想使用行图表上的条形图。因此，每当用户将鼠标悬停在标有＆＃34; A＆＃34;的栏上时，＆＃34; A＆＃34;如果你徘徊在标有＆＃34; A＆＃34;。

的图例上，就会以同样的方式突出显示

在cd.js源代码中，我发现了一个mouseover事件和legendHighlight（d）函数，但是我找不到让它在我的行和复合图表之间工作的方法。

有关如何使其发挥作用的任何想法？

来自小提琴的代码：

    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]"));
}