如何在 d3.js 中使用创建和使用函数答案

【问题标题】：How to use create and use a function within d3.js如何在 d3.js 中使用创建和使用函数
【发布时间】：2017-07-30 08:20:40
【问题描述】：

我正在尝试使用 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,
};

但它不起作用，我收到错误：

错误：属性转换：预期为 ')'，"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

    }

}

我在这里做错了什么？

【问题讨论】：

bi.translate的返回值是多少？
你不觉得好玩吗。比如，settings.category_padding=category_padder() 而不是 settings.category_padding=category_padder?
@GerardoFurtado 嗯.....返回值是这样的：translate(358function () { return (parentRect.width < 940) ? 50 : 125; }, 0) - 358 将是 axisMargin.left 的值。
如您所见，这是完全错误的。应该只是attr("transform", "translate(" + (axisMargin.left + settings.category_padding) + ", 0)");
@Siddharthan 我认为这不重要吗？

标签： javascript d3.js charts

【解决方案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)

再次，从最简单的事情开始，一次改变一件小事，检查它是否有效，然后重复 - 避免陷入这种情况。

【讨论】：