如何使用创建和使用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内的函数

回答

相关问题