用这样的d3.js编写的重构代码的推荐方法是什么？

Question

这是密码。

var mapXOffset = 20;
var mapYOffset = 20;
var personSize = 4;
var redCount = 200;
var blueCount = 200;

function redraw() {
    var svg = d3.select("svg");
    var tempArray = makeRandomArray(0,10000, redCount+blueCount);
    var redArray = tempArray.slice(0,redCount);
    var blueArray = tempArray.slice(redCount,redCount+blueCount);

    var redData = svg.selectAll("rect.red")
        .data(redArray);
    var blueData = svg.selectAll("rect.blue")
        .data(blueArray);


    redData.enter().append("rect")
    .attr("x", function(d, i)
          {
          return mapXOffset + personSize * (d%100);
          })
    .attr("y", function(d)
          { 
          return mapYOffset + personSize * (d/100);
          })
    .attr("width", personSize)
    .attr("height", personSize)
    .attr("class", "red");

    blueData.enter().append("rect")
    .attr("x", function(d, i)
          {
          return mapXOffset + personSize * (d%100);
          })
    .attr("y", function(d)
          { 
          return mapYOffset + personSize * (d/100);
          })
    .attr("width", personSize)
    .attr("height", personSize)
    .attr("class", "blue");

    redData.transition()
    .duration(1000)
    .attr("x", function(d, i)
          {
          return mapXOffset + personSize * (d%100);
          })
    .attr("y", function(d)
          { 
          return mapYOffset + personSize * (d/100);
          });    

    blueData.transition()
    .duration(1000)
    .attr("x", function(d, i)
          {
          return mapXOffset + personSize * (d%100);
          })
    .attr("y", function(d)
          { 
          return mapYOffset + personSize * (d/100);
          });    

};

如图所示，redData和blueData所做的事情除了.attr("class", "");部分外，几乎是一样的。哪种方法可以更好地重构代码：(1)将冗余代码封装成函数(2)生成数组[redArray, BlueArray]并在其上迭代。还是其他方式更喜欢？

Answer 1

看起来，您可以简单地通过创建一个updateData()方法并从重绘中调用它来重构。

function updateData(selector, class, array) {

  var svg = d3.select("svg");
  var data = svg.selectAll(selector).data(array);

  data.enter().append('rect')
    .attr('x', function(d, i) {
      return mapXOffset + personSize * (d%100); })
    .attr('y', function(d) {
      return mapYOffset + personSize * (d/100); })
    .attr("width", personSize)
    .attr("height", personSize)
    .attr("class", class);

  data.transition()
    .duration(1000)
    .attr("x", function(d, i) {
      return mapXOffset + personSize * (d%100); })
    .attr("y", function(d) { 
      return mapYOffset + personSize * (d/100); });    
}


function redraw() {
    var tempArray = makeRandomArray(0,10000, redCount+blueCount);
    var redArray = tempArray.slice(0,redCount);
    var blueArray = tempArray.slice(redCount,redCount+blueCount);

    updataData('rect.red', 'red', redArray);
    updataData('rect.blue', 'blue', blueArray);
};

或者，您可以在svg中定义refresh，并将其作为另一个参数传入。如果您添加了太多的参数，请考虑将它们作为对象文本传入。

您也可以迭代一个数组，但是它需要每个数组元素的更多参数，而不仅仅是redArray和blueArray。最终，它是基于哪种方法生成最简洁和/或可读的代码的判断调用。

下面是我想象的数组版本的样子。它有一定的吸引力，因为它不需要单独的函数定义。

function redraw() {
  var tempArray = makeRandomArray(0,10000, redCount+blueCount);
  var redArray = tempArray.slice(0,redCount);
  var blueArray = tempArray.slice(redCount,redCount+blueCount);

  var svg = d3.select("svg");

  var red = {selector: 'rect.red', class: 'red', array: redArray};
  var blue = {selector: 'rect.blue', class: 'blue', array: blueArray};

  [red, blue].forEach(function(item) {
    var data = svg.selectAll(item.selector).data(item.array);
    data.enter().append('rect')
      .attr('x', function(d, i) {
        return mapXOffset + personSize * (d%100); })
      .attr('y', function(d) {
        return mapYOffset + personSize * (d/100); })
      .attr("width", personSize)
      .attr("height", personSize)
      .attr("class", item.class);

    data.transition()
      .duration(1000)
      .attr("x", function(d, i) {
        return mapXOffset + personSize * (d%100); })
      .attr("y", function(d) { 
        return mapYOffset + personSize * (d/100); });    
  });
}

Answer 2

Mike写了一本关于可重用图表的优秀文章。 --还有一本很好的书叫做开发D3.js Edge，我强烈推荐它(它很短，也很容易读)。

本质上，您希望使用getter-setter方法将图表实现为闭包，这使您能够随心所欲地重用图表代码，同时还提供了修改现有图表对象属性的可配置性。