Question

我试图在d3.js中使用一个函数来避免代码重复，但我遇到了麻烦。

例如，我有这一行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="review-value" data-rating="5"></div>
<div class="review-value" data-rating="7"></div>

现在，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

然而它无效，我收到错误：

错误：属性转换：预期＆＃39;）＆＃39;，＆＃34;翻译（358function（）

结构：

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

settings = {
  category_padding: category_padder,
};

我在这里做错了什么？

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)

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

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

1 个答案: