Javascript d3.js笔刷填充颜色直方图

我用

d3.js

创建了一些直方图。 我设法根据

笔刷的位置更改了
rect
的填充颜色。
但是我想更改
rect
中的颜色。例如，如果<代码>画笔开始< /代码>在“代码> ReCT Rect<代码>。p>
目前，这就是我所拥有的：


这就是我想要的：


我见过这样的例子。我是d3新手，我试图理解代码。

我看到他们使用
剪辑路径
，当他们的画笔没有画笔时，肯定会隐藏背景栏，当他们的画笔是画笔时，根据画笔的范围显示背景栏

这是一个

更新
我已经详细阅读了文件中提供的代码。我发现他们不会创建
元素来制作图表，而是
条路径
如下所示：

function barPath(groups) {
        var path = [],
            i = -1,
            n = groups.length,
            d;
        while (++i < n) {
          d = groups[i];
          path.push("M", x(d.key), ",", height, "V", y(d.value), "h9V", height);
        }
        return path.join("");
      }

功能条路径（组）{
变量路径=[]，
i=-1，
n=组长度，
D
而（++i

但我不明白这个函数中发生了什么，如果他们没有其他方法来做的话，如何用这种方式来点它
 我不会尝试绘制部分条形图（正如您的编辑所建议的那样），而是添加两次条形图，一次底部为灰色，然后顶部为钢蓝色。然后，您可以将剪辑路径应用于蓝色条，当它们被剪辑时，您将看到下面的灰色

完整代码：



.图表{
填充：10px0；
}
.图表{
左侧填充：20px；
填充顶部：10px；
}
.轴文本{
字体：10px无衬线；
填充：黑色；
}
.图表文本{
字体：10px无衬线；
填充：黑色；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
/*不显示分类变量的yAxis*/
#图表y轴g{
显示：无；
}
/*分类图中的标签*/
text#catTitle.catTitle{
字体：10px无衬线；
填充物：白色；
}
/*画笔的颜色*/
.刷直{
填充：钢蓝；
填充不透明度：.125；
}
/*笔刷大小调整路径的颜色*/
.brush.resize路径{
填充：#eee；
行程：#666；
}
/*隐藏对象的颜色*/
.隐藏{
填充物：灰色；
}
.酒吧{
填充：钢蓝；
}
风险值数据=[{
重点:1,，
价值：37
}, {
关键词：1.5，
价值：13
}, {
关键词：2.5，
价值：1
}, {
重点:三,，
价值：4
}, {
关键词：3.5，
价值：14
}, {
重点:四,，
价值：18
}, {
关键词：4.5，
价值：21
}, {
重点:五,，
价值：17
}, {
关键词：5.5，
价值：16
}, {
重点:6,，
价值：5
}, {
关键词：6.5，
价值：4
}];
var保证金={
前10名，
右：41，
底图：42，
左：10
};
变量宽度=400-margin.left-margin.right，
高度=250-margin.top-margin.bottom；
变量y=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d））{
返回d值
})])
.范围（[高度，0]）；
var x=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d））{
返回d.key；
}) + 1])
.rangeRound（[0，宽度]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var图表=d3。选择（“.图表#图表”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.样式（“左边距”，15+“像素”）；
图表.附加（“defs”）
.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“x”，0）
.attr（“y”，0）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var brush=d3.svg.brush（）
.x（x）
.on（“刷子”，刷子）
.on（“刷端”，刷端）；
函数brushend（）{
if（brush.empty（））{
图表。选择（“剪辑>矩形”）
.attr（“x”，0）
.attr（“宽度”，宽度）；
}
}
函数brushed（）{
var e=brush.extent（）；
图表。选择（“剪辑>矩形”）
.attr（“x”，x（e[0]））
.attr（“宽度”，x（e[1]）-x（e[0]）；
}
图表。选择全部（“.隐藏”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“隐藏”）
.attr（“x”，函数（d）{
返回x（d键）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
.attr（“宽度”，x（0.5））
.style（“笔划”、“白色”）
.附加（“标题”）
.文本（功能（d）{
返回d.key；
});
图表。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“剪辑路径”、“url（#剪辑）”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{
返回x（d键）；
})
.attr（“y”，函数（d）{
返回y（d值）；
})
.attr（“高度”，功能（d）{
返回高度-y（d值）；
})
.attr（“宽度”，x（0.5））
.style（“笔划”、“白色”）
.附加（“标题”）
.文本（功能（d）{
返回d.key；
});
图表.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
chart.append（“text”）//添加图表标题
.attr（“变换”、“平移”（+（宽度/2）+）、“+（高度+边距.底部）+”）
.style（“文本锚定”、“中间”）
.文本（“花瓣长度”）；
图表.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
图表.附加（“g”）
.attr（“cl