如何在 D3.js 中的图表上设置滑块样式并显示动态 y 值的标签？

Question

Here is a sample fiddle of a simple chart.

我是新了解D3.js，我喜欢它并且对它和它的创建者 Mike Bostock 印象深刻。

我创建了一个图表网页，其中的值相互影响，有点像 Bostock 惊人的 Rent Versus Buy calculator in the New York Times。

我尝试创建一个滑块（使用 JqueryUI）来更改输入值（如下所示的 $250,000 输入框），这会影响图表的 y 值。它可以工作，但外观令人失望，而且不适合移动设备。

我无法通过教程或 documentation 弄清楚如何像 Bostock 那样创建滑块，如下所示：

我认为 Bostock 没有使用 D3 以外的任何东西来构建他的滑块和样式。

我试图查看他的源代码，但没有运气。

在 my sample fiddle 中，我使用了一个 JqueryUI 滑块 ($("<div class='slider'></div>").insertAfter(input).slider()) 和一些 CSS。

是否有我尚未发现的 D3 功能可以帮助我的图表看起来更像他的？

如果您能指出如何创建（和设置样式）滑块、y 值标签和轴的正确方向，我将不胜感激。

Answer 1

这是我从头开始编写的一个非常简单的演示，因此不是基于您在小提琴中的代码，显示了您要创建的数据可视化的基本方面。

在这个演示中，我只使用了 D3，没有使用 jQuery（将 D3 与 jQuery 混合让我头疼）：

var width = 500,
    height = 180,
    padding = 16;

var svg = d3.select("#svg")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var data = d3.range(1, 21);

var xScale = d3.scaleBand()
    .domain(data)
    .range([padding * 2, width - padding])
    .padding(0.2);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d)])
    .range([height - padding, padding]);

var bars = svg.selectAll(".bars")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d))
    .attr("width", xScale.bandwidth())
    .attr("y", d => yScale(d))
    .attr("height", d => height - padding - yScale(d))
    .attr("fill", (d => d3.select("#slider").node().value == d ? "firebrick" : "teal"));

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

var gX = svg.append("g")
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis);

var gY = svg.append("g")
    .attr("transform", "translate(" + padding * 2 + ",0)")
    .call(yAxis);

d3.select("#slider").on("input", function() {
    var currentValue = this.value;
    yScale.domain([0, currentValue * 2])
    bars.attr("y", d => yScale(d))
        .attr("height", d => height - padding - yScale(d))
        .attr("fill", (d => currentValue == d ? "firebrick" : "teal"));
    gY.call(yAxis);
})

#slider {
  width: 435px;
}
#sliderdiv{
  padding-left: 40px;
 }

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="svg"></div>
<div id="sliderdiv"><input id="slider" type="range" min="1" max="20" step="1" value="10"/></div>

解释：

在这个例子中，我为滑块使用了一个常规的 HTML 输入：

<input id="slider" type="range" min="1" max="20" step="1" value="10"/>

然后，我们用这个函数得到那个滑块的变化：

d3.select("#slider").on("input", function() {
    var currentValue = this.value;
    yScale.domain([0, currentValue * 2])
    bars.attr("y", d => yScale(d))
        .attr("height", d => height - padding - yScale(d))
        .attr("fill", (d => currentValue == d ? "firebrick" : "teal"));
    gY.call(yAxis);
})

在该函数中，我们有 3 个主要步骤。首先，我们获取滑块的当前值：

var currentValue = this.value;

并且，使用该值，我们更改 y 比例：

yScale.domain([0, currentValue * 2])

这样，选定的条将始终保持在相同的高度，就像在 Bostock 的代码中一样。然后，我们更新条形：

bars.attr("y", d => yScale(d))
    .attr("height", d => height - padding - yScale(d))
    .attr("fill", (d => currentValue == d ? "firebrick" : "teal"));

最后是 y 轴：

gY.call(yAxis);