如何修复 d3 中的多刷图表

Question

我太近了，这快要了我的命。我已经为一列生成了一个简单的画笔，它生成了完美设置的限制。问题是我想要多列 ['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>

Answer 1

将画笔视为数据，因为它们映射到 x 轴上的每个序数值。使用 .enter 创建画笔并附加所有必要的功能。.each 函数类似于调用，但分别在每个元素上运行。这对于包含画笔的生成非常有用。

xData = ["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(xData)

  .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 + ")");

  

const brushes = svg.selectAll('g.brush')

  .data(xData)

  .enter()

  .append('g')

  .attr('class', 'brush')

  .each(function(d) {

    const el = d3.select(this);

    

    const brush = d3.svg.brush().y(y).on("brushend", () => console.log(d, ' Extent: ', brush.extent()));

    

    el.call(brush);

    

    el.selectAll("rect")

      .attr("x", x(d))

      .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>