Javascript 为什么';同一组是否绘制了正确的折线图和相应的范围图?
在这里拉小提琴: 我正在尝试为我的范围图引入一个类似的数据表示,这样我就可以在范围图上拖动,但在实际的循环数据折线图中使用工具提示。目前,我认为我有两个问题正在打破我的交叉过滤器,并导致范围图看起来很糟糕:Javascript 为什么';同一组是否绘制了正确的折线图和相应的范围图?,javascript,d3.js,data-visualization,dc.js,crossfilter,Javascript,D3.js,Data Visualization,Dc.js,Crossfilter,在这里拉小提琴: 我正在尝试为我的范围图引入一个类似的数据表示,这样我就可以在范围图上拖动,但在实际的循环数据折线图中使用工具提示。目前,我认为我有两个问题正在打破我的交叉过滤器,并导致范围图看起来很糟糕: 如果使用crossfilter生成的标准组,则得到的值为(循环数据*循环的区域数)。为了绕过这个问题,我创建了一个映射,它跟踪区域的数量,并划分表示的值。我不知道如何为此创建一个组,并在数据级别处理它。因此,我只是在渲染步骤中进行更正-这可能是我痛苦的原因吗 我对折线图和范围图使用完全相同的
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 :nth-child(1) {
height: 15em;
}
对于:第n个子项(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);
所有的工具栏都有工具提示,你看不到它们,因为画笔正在捕捉所有鼠标事件。也许可以禁用此图表的工具提示