如何在d3.js中使用創建和使用函數

Question

我試圖在d3.js中使用一個函數來避免代碼重復，但是這樣做很麻煩。

例如，我有這行：

attr('transform', bi.translate(axisMargin.left + settings.category_padding, 0));

現在， axisMargin.left本身使用一個函數來獲取它的值，它是這樣的：

leftMargin = d3.max(chart_data.Data, function(data) {
  return (data.Category.Name.length + (data.Group === null ? 0 : data.Group.Name.length)) * settings.text_letter_width + settings.text_min_width;
});
axisMargin = {
  left: leftMargin,
  bottom: 50,
  group: 5
};

但是，我不需要使用諸如d3.max類的d3.max也不需要任何其他數據，所以我想做這樣的事情：

category_padder = function() {
  return (parentRect.width < 940) ? 50 : 125;
};

settings = {
  category_padding: category_padder,
};

但是它不起作用，我得到了錯誤：

錯誤：屬性轉換：預期為'）'，“ translate（358function（）

結構體：

bi.models.barchart = function(chart_data) {

    var settings, axisMargin, leftMargin, category_padder;

    // Settings and functions reside here

    // Calls to functions may be called here

    chart = function() {

        // Calls to functions may be called here too

    }

}

我在這里做錯了什么？

Answer 1

首先，從最基本的方法開始起作用，然后一次添加/更改一個元素，確保它仍然起作用。 例如， .attr('transform', _second_arg_)的第二個參數必須是您將transform屬性設置為的直接值 ：

.attr('transform', 'translate(100 100)')

或一個函數 ，如果需要，它可以訪問綁定數據的各個位，通常是數據點本身，例如

.attr('transform', function(d) {return 'translate(100 ' + 16 * d.rowNum + ')';})

使用函數作為第二個參數的唯一原因是當屬性或樣式值取決於綁定數據時 。 當然可以

.attr('transform', myFunction(config))

但它與按值調用沒有區別，因為它細分為

var transformValue = myFunction(config); ... .attr('transform', transformValue)

同樣，從最簡單的事情開始，一次更改一件小事情，檢查它是否有效，然后重復進行-避免陷入這種情況。