我太近了，這快要了我的命。我已經為一列生成了一個簡單的畫筆，它生成了完美設置的限制。問題是我想要多列 ['A'、'B'、'C'、'D'] 的多個畫筆。我可以把它寫四次，但我把它放在一個似乎不起作用的函數中。請查看下面的工作代碼，我已經注釋掉了不起作用的部分。我知道我需要以某種方式綁定數據并進行循環，但我該如何有效地做到這一點？var margin = {    top: 20,    right: 20,    bottom: 30,    left: 50  },  width = 960 - margin.left - margin.right,  height = 180 - margin.top - margin.bottom;var x = d3.scale.ordinal()  .domain(["A", "B", "C", "D"])  .rangeBands([0, 200])var y = d3.scale.linear()  .range([height, 0])  .domain([0, 100])var xAxis = d3.svg.axis()  .scale(x)var svg = d3.select("#timeline").append("svg")  .attr("width", width + margin.left + margin.right)  .attr("height", height + margin.top + margin.bottom)  .append("g")  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");// define brush control element and its eventsvar brush = d3.svg.brush().y(y)  .on("brushend", () => console.log('A Extent: ', brush.extent()))// create svg group with class brush and call brush on itvar brushg = svg.append("g")  .attr("class", "brush")  .call(brush);// set brush extent to rect and define objects heightbrushg.selectAll("rect")  .attr("x", x("A"))  .attr("width", 20);/*var brush = (d) => {    var brush = d3.svg.brush().y(y)                          .on("brushend", () => console.log(d, ' Extent: ', brush.extent()))          var brushg = svg.append("g")        .attr("class", "brush")        .call(brush1);    brushg.selectAll("rect")        .attr("x", x("A"))        .attr("width", 20); } */.brush {  fill: lightgray;  fill-opacity: .75;  shape-rendering: crispEdges;}<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js'></script><div class="container">  <div id="timeline"></div></div>