如何使用創建和使用d3.js內的函數

我試圖使用d3.js內的函數來避免代碼重複，但我在這樣做時遇到了麻煩。如何使用創建和使用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或需要任何其他數據，所以我想要做這樣的事情：

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

settings = { 
    category_padding: category_padder, 
};

但是它不工作，我得到的錯誤：

Error: attribute transform: Expected ')', "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 

    } 

}

我在做什麼錯在這裏？

來源

2017-07-30 Brett

'bi.translate'的返回值是什麼？ –

難道你沒有打電話的樂趣。像'settings.category_padding = category_padder（）'而不是'settings.category_padding = category_padder'？ – Sidtharthan

@GerardoFurtado嗯.....返回的值是這樣的：'translate（358function（）{ return（parentRect.width <940）？50：125; }，0）' - '358'將是'axisMargin.left'的值。 – Brett

從一個非常基本的東西開始，然後一次添加/更改一個元素，確保它仍然有效。例如，在.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)

再次，從最簡單的事情，改變一個小一次檢查一下，檢查它是否有效，並重復 - 避免陷入這種情況。

來源

2017-07-30 10:44:32

如何使用創建和使用d3.js內的函數

回答

相關問題