在d3条形图上添加画笔

我想在d3的条形图顶部添加画笔。目前我使用条形图我的例子： https://bl.ocks.org/mbostock/1134768 在d3条形图上添加画笔

这是我想要实现刷的例子：http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我只能找到例子，其中布什是图表下方，而不是在主图表本身。任何人都可以向我解释如何将刷子放在条形图的顶部，或者指向我可以遵循的示例方向吗？

2016-09-30 medium

根据你的例子，你正在使用d3 v3？如果你不受版本限制，看看版本4和[刷模块]（https://github.com/d3/d3-brush）;它比较前面的刷子功能有一定的方便性，并且在整个区域上有一些使用刷子的例子（比如[this one]（http://bl.ocks.org/mbostock/0d20834e3d5a46138752f86b9b79727e））。 – mgc

在你指的是Brush & Zoom例子中，有下列行：

var focus = svg.append("g") 
    .attr("class", "focus") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var context = svg.append("g") 
    .attr("class", "context") 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 

... 
    svg.append("rect") 
     .attr("class", "zoom") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(zoom);

这些指定图表区域，刷区域和缩放区域的位置。您只需调整在脚本开始处指定的margin和margin2值，或者在此处明确设置不同的转换。

你需要有margin.top > margin2.top，并调整底部边距。

来源

2016-10-02 13:43:43 Nixie

在d3条形图上添加画笔

回答

相关问题