Question

对于我的论文，我使用d3.js库编写了一些JavaScript代码，以基于数据库创建动态数据可视化。我有一些元素允许用户对可视化应用一些更改，并且图表会做出相应的反应。这是我的问题：因为我自己学习了alla，我曾经复制并粘贴了.on更改事件监听器中更新所需的代码部分，使得代码真的很长（我认为是多余的）。有没有更优雅的方法来解决这个问题，缩短代码并使其更容易调试，阅读，并让它看起来更好？代码是结构化的，所以我有许多相互链接的变量，因为许多东西是相关的。代码的一个例子：

//The two histogram variables
var histogSans = d3 .layout.histogram()
                    .bins(bin)
                    .value(function (d) { return d[SelX]; })
                    (FontSans);
var histogSerif = d3.layout.histogram()
                    .bins(bin)
                    .value(function (d) { return d[SelX]; })
                    (FontSerif);

//Max values of the two histograms
var MaxSans = d3.max(histogSans, function (d) { return d.y; });
var MaxSerif = d3.max(histogSerif, function (d) { return d.y; });

然后在.on（“更改”）事件上我需要更新这些值，所以我只是再次粘贴整个代码 - 如果可视化的某些元素需要更新（主要是svg元素），这也会发生。有没有办法可以避免这种情况？我知道这是一个非常基本的问题，但我对JavaScript的了解并不是那么好。提前谢谢！

Answer 1

这似乎是一个简单的Extract Method重构。

var histogSans  = hist(FontSans);
var histogSerif = hist(FontSerif);

function hist(fontName) {
    return d3 .layout.histogram()
              .bins(bin)
              .value(function (d) { return d[SelX]; })
              (fontName);
}

这是否符合您的需求？

使用.on更改事件以优雅的方式更改页面元素

1 个答案: