Javascript 如何使用D3 js创建分组条形图

我正在创建一个可刷条形图，在Y轴上，我需要具有可刷内容的分组图表，每当我移动画笔时，图形都不会刷新。 使用以下代码创建附加条

 var bar2 = bar.enter().append("rect")
      .attr("class", "bar2")
      .attr("id","lesser")
      .style("fill", "#ff7f0e")
      .attr("y", function(d,i) { return main_yScale(d.country); })
      .attr("height", main_yScale.rangeBand()/2)
      .attr("x", 0)
      .transition().duration(50)
      .attr("width", function(d) { return main_xScale(d.result); });

我试过了 我无法解决这个问题

---

提前感谢

主要问题是连接模式的使用方式（

selectAll（“abc”）.data（mylist）.enter（）

）。再次阅读文档以查看详细信息

• 为什么在不使用缩放时创建缩放。我已将其从示例中删除
• 关于工具提示的每一件事都会被评论
• 不要在每次笔刷移动时为X计算一个新的域，这会给人一种印象，即值会因为条的大小改变而改变
• 不要用相同的

  id

  （

  较大的
  /
  较小的
  ）定义多个元素。使用一个类

• 使用属性定义

  填充

  ，或使用

  样式定义填充

  ，但不能同时使用这两种颜色，使用不同的颜色更难确定您想要/将使用哪种颜色
• 为什么动画的宽度-50毫秒是如此短，没有人会注意到

• scroll（）

  有什么用
• 也许可以将图表移植到d3v5

var data=[]、svg、defs、gBrush、brush、mainxscale、minixscale、mainyscale、，
小刻度、主刻度、主刻度、主刻度、主刻度、小刻度宽度、文本刻度；
init（）；
函数init（）{
对于（变量i=1；i<30；i++）{
var my_object={}；
my_object.key=i；
my_object.country=“Label”+i；
my_object.gtLabel=“更大”；
my_object.value=Math.floor（Math.random（）*600）；
my_object.ltLabel=“Lesser”；
my_object.result=Math.floor（Math.random（）*300）；
data.push（我的对象）；
}
//var zoomer=d3.behavior.zoom（）
//.on（“缩放”，空）；
var main_margin={顶部：10，右侧：10，底部：30，左侧：100}，
main_width=450-main_margin.left-main_margin.right，
main_高度=250-main_margin.top-main_margin.bottom；
var mini_margin={top:10，right:10，bottom:30，left:10}，
mini_height=250-mini_margin.top-mini_margin.bottom；
mini_width=100-mini_margin.left-mini_margin.right；
svg=d3。选择（“正文”）。追加（“svg”）
.attr（“类”、“svgWrapper”）
.attr（“宽度”，主\u宽度+主\u页边距。左+主\u页边距。右+小\u宽度+小\u页边距。左+小\u页边距。右）
.attr（“高度”，主高度+主页边距。顶部+主页边距。底部）；
//.呼叫（缩放器）
//.on（“滚轮.缩放”，滚动）
//.on（“mousedown.zoom”，null）
//.on（“touchstart.zoom”，空）
//.on（“touchmove.zoom”，空）
//.on（“touchend.zoom”，null）；
var mainGroup=svg.append（“g”）
.attr（“类”、“mainGroupWrapper”）
.attr（“转换”、“翻译（180,10）”）
.附加（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
.style（“剪辑路径”、“url（#剪辑）”）
.attr（“类别”、“主要集团”）；
var miniGroup=svg.append（“g”）
.attr（“类”、“小型组”）
.attr（“转换”、“翻译（135,10）”）；
var brushGroup=svg.append（“g”）
.attr（“类”、“组”）
.attr（“转换”、“翻译（135,10）”）；
main_xScale=d3.scale.linear（）.range（[0，main_width]）；
mini_xScale=d3.scale.linear（）.range（[0，mini_width]）；
main_yScale=d3.scale.ordinal（）.范围带（[0，main_高度]，0.4，0）；
mini_yScale=d3.scale.ordinal（）.范围带（[0，mini_height]，0.4，0）；
main_yZoom=d3.scale.linear（）
.范围（[0，主高度]）
.域（[0，主_高度]）；
main_xAxis=d3.svg.axis（）
.刻度（主刻度）
.orient（“底部”）
.tick格式（d3格式（“.2s”）；
d3.选择（“.mainGroupWrapper”）
.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移”（+0+），“+（主高度+5）+”）；
svg.append（“文本”）
.attr（“变换”、“平移”（+（主宽度/2）+），“+（主高度+（主边距.底部-60））+”）
.attr（“dy”，“.71em”）
.attr（“类”、“x轴”）
.attr（“笔划宽度”，1）
.style（“字体大小”，“15px”）
.文本（“”）；
main_yAxis=d3.svg.axis（）
.刻度（主刻度）
.方向（“左”）。尺寸（5）；
mainGroup.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“翻译（-48,0）”）；
mainxscale.domain（[0，d3.max（数据，函数（d）{返回d.value；}）]；
minixscale.domain（[0，d3.max（数据，函数（d）{返回d.value；}）]；
main_yScale.domain（data.map（函数（d）{returnd.country；}））；
mini_yScale.domain（data.map（函数（d）{return d.country；}））；
d3.选择（“.mainGroup”）。选择（“.y.axis”）。调用（main\u yAxis）；
textScale=d3.scale.linear（）
.域名（[25,50]）
.范围（[12,6]）
.夹具（正确）；
var brushExtent=15；//Math.max（1，Math.min（20，Math.round（data.length*0.2））；
brush=d3.svg.brush（）
.y（小刻度）
.extent（[mini_yScale（数据[0]。国家/地区），mini_yScale（数据[brushExtent]。国家/地区）]）
.on（“刷子”，刷子移动）；
gBrush=d3。选择（“.brushGroup”）。追加（“g”）
.attr（“类”、“刷”）
.打电话（刷子）；
gBrush.selectAll（“.resize”）
.附加（“行”）
.attr（“x2”，40）；
gBrush.selectAll（“rect”）
.attr（“宽度”，40）；
gBrush.select（“.background”）
.on（“mousedown.brush”，笔刷中心）
.on（“touchstart.brush”，笔刷中心）；
defs=svg.append（“defs”）
定义附加（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“x”，主页边空白处。左）
.attr（“宽度”，主宽度+主页边距。左）
.attr（“高度”，主要高度）；
var mini_bar=d3.选择（“.miniGroup”）.选择全部（“.bar”）
.data（数据，函数（d）{返回d.key；}）；
迷你酒吧
.attr（“宽度”，函数（d）{return（minixscale（d.value）/2.2）；}）
.attr（“y”，函数（d