Question

我有一个像this forked fiddle中那样的dc js条形图。在这种情况下，此条形图将加载预定义的过滤器，如25-35。现在，我需要显示折线图复合材料，条形图突出显示过滤后的数据，具有高低线条，如此图所示。

Bar chart with high low line chart indicators

JS代码：

var tempBarChart = dc.barChart("#barChartTemp");

// reset the charts
function reset() {
    dc.filterAll();
    dc.renderAll();
}

// remove axis markings 
tempBarChart.yAxis().ticks(0);
var parseDate = d3.time.format("%m/%d/%Y").parse;

// Add more ticks
tempBarChart.xAxis().ticks(10);


// change width of bars, lower # = wider
tempBarChart.xUnits(function () {
    return 30;
});


// change the colors
//var colorScale = d3.scale.ordinal().range(["#ff7f0e"]);

json = [{
    "date": "12/27/2012",
    "Ocean": "South Atlantic",
    "temp": 23,
    "psal": 35,
    "pressure": 35,
    "FloatID": 133465,
    "pH": ".4"
}, {
    "date": "12/27/2012",
    "Ocean": "South Atlantic",
    "temp": 23,
    "psal": 35,
    "pressure": 35,
    "FloatID": 133465,
    "pH": ".7"
}, {
    "date": "12/27/2012",
    "Ocean": "South Atlantic",
    "temp": 23,
    "psal": 35,
    "pressure": 35,
    "FloatID": 133455,
    "pH": ".2"
}, {
    "date": "12/27/2012",
    "Ocean": "Indian",
    "temp": 23,
    "psal": 30,
    "pressure": 200,
    "FloatID": 133665,
    "pH": ".8"
}, {
    "date": "12/27/2012",
    "Ocean": "South Atlantic",
    "temp": 23,
    "psal": 30,
    "pressure": 300,
    "FloatID": 133565,
    "pH": ".3"
}, {
    "date": "12/27/2012",
    "Ocean": "South Atlantic",
    "temp": 23,
    "psal": 33,
    "pressure": 400,
    "FloatID": 123465,
    "pH": ".5"
}, {
    "date": "12/28/2012",
    "Ocean": "South Pacific",
    "temp": 20,
    "psal": 38,
    "pressure": 600,
    "FloatID": 133765,
    "pH": ".7"
}, {
    "date": "12/29/2012",
    "Ocean": "South Atlantic",
    "temp": 22,
    "psal": 33,
    "pressure": 750,
    "FloatID": 135465,
    "pH": ".9"
}, {
    "date": "12/30/2012",
    "Ocean": "Indian",
    "temp": 27,
    "psal": 37,
    "pressure": 900,
    "FloatID": 133485,
    "pH": ".7"
}, {
    "date": "01/03/2013",
    "Ocean": "North Atlantic",
    "temp": 21,
    "psal": 34,
    "pressure": 1400,
    "FloatID": 126466,
    "pH": ".6"
}, {
    "date": "01/04/2013",
    "Ocean": "South Pacific",
    "temp": 31,
    "psal": 38,
    "pressure": 1600,
    "FloatID": 133467,
    "pH": ".3"
}, {
    "date": "01/05/2013",
    "Ocean": "South Atlantic",
    "temp": 35,
    "psal": 39,
    "pressure": 1700,
    "FloatID": 144485,
    "pH": ".2"
}, {
    "date": "01/06/2013",
    "Ocean": "Antarctic",
    "temp": 32,
    "psal": 31,
    "pressure": 1800,
    "FloatID": 166465,
    "pH": ".6"
}, {
    "date": "01/06/2013",
    "Ocean": "North Pacific",
    "temp": 32,
    "psal": 31,
    "pressure": 1800,
    "FloatID": 173765,
    "pH": ".7"
}, {
    "date": "12/31/2012",
    "Ocean": "Indian",
    "temp": 20,
    "psal": 32,
    "pressure": 1000,
    "FloatID": 143465,
    "pH": ".2"
}, {
    "date": "01/01/2013",
    "Ocean": "North Pacific",
    "temp": 29,
    "psal": 31,
    "pressure": 1110,
    "FloatID": 135465,
    "pH": ".9"
}, {
    "date": "01/02/2013",
    "Ocean": "North Atlantic",
    "temp": 33,
    "psal": 38,
    "pressure": 1200,
    "FloatID": 153465,
    "pH": ".8"
}, {
    "date": "01/03/2013",
    "Ocean": "North Atlantic",
    "temp": 21,
    "psal": 34,
    "pressure": 1400,
    "FloatID": 136465,
    "pH": ".5"
}, {
    "date": "01/04/2013",
    "Ocean": "North Pacific",
    "temp": 31,
    "psal": 38,
    "pressure": 1600,
    "FloatID": 133465,
    "pH": ".7"
}, {
    "date": "01/05/2013",
    "Ocean": "Indian",
    "temp": 35,
    "psal": 39,
    "pressure": 1700,
    "FloatID": 134465,
    "pH": ".6"
}, {
    "date": "01/06/2013",
    "Ocean": "North Pacific",
    "temp": 32,
    "psal": 31,
    "pressure": 1800,
    "FloatID": 163465,
    "pH": ".2"
}, {
    "date": "01/03/2013",
    "Ocean": "North Atlantic",
    "temp": 21,
    "psal": 34,
    "pressure": 1400,
    "FloatID": 136466,
    "pH": ".3"
}, {
    "date": "01/04/2013",
    "Ocean": "South Pacific",
    "temp": 31,
    "psal": 38,
    "pressure": 1600,
    "FloatID": 133467,
    "pH": ".6"
}, {
    "date": "01/05/2013",
    "Ocean": "South Atlantic",
    "temp": 35,
    "psal": 39,
    "pressure": 1700,
    "FloatID": 134485,
    "pH": ".7"
}, {
    "date": "01/06/2013",
    "Ocean": "Antarctic",
    "temp": 32,
    "psal": 31,
    "pressure": 1800,
    "FloatID": 165465,
    "pH": ".8"
}, {
    "date": "01/06/2013",
    "Ocean": "North Pacific",
    "temp": 32,
    "psal": 31,
    "pressure": 1800,
    "FloatID": 173465,
    "pH": ".9"
}, {
    "date": "01/07/2013",
    "Ocean": "North Atlantic",
    "temp": 40,
    "psal": 35,
    "pressure": 2000,
    "FloatID": 133485,
    "pH": ".1"
}];
var xFilter = crossfilter(json);


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

// dimensions and groups, Dim = plot readings, Group = individual readings
var tempDim = xFilter.dimension(function (d) {
    return d.temp;
});
var tempGroup = tempDim.group().reduceCount(function (d) {
    return d.temp;
});

var dateDim = xFilter.dimension(function (d) {
    return d.date;
});
var dateGroup = dateDim.group().reduceCount(function (d) {
    return d.total;
});



var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;


var minTemp = tempDim.bottom(1)[0].temp;
var maxTemp = tempDim.top(1)[0].temp;


// Chart 2 -------------------------------      
tempBarChart.width(300).height(150)
    .dimension(tempDim)
    .group(tempGroup)
    .x(d3.scale.linear()
    .domain([15, 45]))
    .xAxisLabel("Temperature")
    .filter([25,35])
    .centerBar(true);



// render all charts
dc.renderAll();

HTML代码：

<body>    
    <div style='clear:both'></div>
    <div style='clear:both'></div>
    <div id="barChartTemp"></div>         
</body>

CSS：

body {
    background-color: white;
    zoom: 200%;
}
/* layout of charts */
 #oceanRowChart {
    float:left;
}
#oceanRowChart .axis {
    visibility:hidden;
}
#barChartDate {
    float: left;
    margin-top:44px;
}
#reset {
    float: left;
    margin-left: 35px;
}
#barChartTemp {
    float: left;
    width:25%;
}
#barChartPsal {
    float: left;
    width:25%;
}
#barChartDepth {
    float: left;
    width:25%;
}
#barChartPH {
    float: left;
    width:25%;
}
#middleRow {
    float:left;
}
.dc-chart.axis y {
    visibility:hidden;
}
.dc-table-label {
    font-weight:bold;
}
/* overwrite bootstrap table */
 .container .row {
    margin-left: -150px;
}

提前致谢，

维基

dc js复合条形图折线图

0 个答案: