在这里小提琴:https://jsfiddle.net/8yf7j3k6/11/
我正在尝试为我的范围图表引入类似的数据表示,以便我可以在范围图表上进行清理,但是在循环数据的实际折线图中使用工具提示。目前,我认为我有两个问题正在破坏我的crossfilter并导致范围图表看起来很棘手:
以下违规图表的代码。请注意,因为没有日期格式的CDN,所以在小提琴中有一些模板
lineChart1
.width(lineChart1Width-50)
.height(lineChart1Height-50)
.xUnits(d3.timeMonths)
.margins({ top: 10, right: 10, bottom: 20, left: 80 })
.dimension(dimension1)
.rangeChart(lineChart1Range)
.group(circulationGroup1)
.colors(colorScales.blue[colorScales.blue.length - 1])
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value / circulationValuesMap[d.key]
})
.title(function (d) {
return `${d.key.format('mmm dd, yyyy')}\nCirculation: ${d.value / circulationValuesMap[d.key]} `
})
.x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
.render()
lineChart1Range
.width(getWidth('line-chart-1-range')) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */
.height(40)
.margins({top: 0, right: 50, bottom: 20, left: 80})
.dimension(dimension1)
.group(circulationGroup1)
.valueAccessor(d => d.value / circulationValuesMap[d.key])
.centerBar(true)
.x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
.round(d3.timeMonth.round)
.alwaysUseRounding(true)
.xUnits(() => 200);
lineChart1Range.yAxis().ticks(0)
问题是你的CSS。
此规则适用于.line-chart-container
内的任何元素的每个第一个子元素,也适用于画笔叠加层。
.line-chart-container :nth-child(1) {
height: 15em;
}
:nth-child(2)
也是如此。
替换实际div
元素的2个CSS高度规则
#line-chart-1 {
height: 15em;
}
#line-chart-1-range {
height: 2em;
}
删除2个大条。
您的折线图和范围图表也没有对齐,它们具有不同的宽度和边距。
lineChart1Range
//.width(getWidth('line-chart-1-range')) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */
.width(lineChart1Width-50)
.height(40)
//.margins({top: 0, right: 50, bottom: 20, left: 80})
.margins({top: 0, right: 10, bottom: 20, left: 80})
.dimension(dimension1)
.group(circulationGroup1)
.valueAccessor(d => d.value / circulationValuesMap[d.key])
.centerBar(true)
.x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
.round(d3.timeMonth.round)
.alwaysUseRounding(true)
.xUnits(() => 200);
所有的条都有工具提示,你看不到它们,因为画笔正在捕捉所有的鼠标事件。也许可以禁用此图表的工具提示