html滑块数值怎么显示,javascript – 如何在D3.js中的图表上设置滑块样式并显示动态y值的标签？...

我是第一个学习D3.js的人,我很喜欢它并且它和它的创造者Mike Bostock印象深刻.

我试图创建一个滑块(使用JqueryUI)来更改输入值(如下面显示的$250,000输入框),这会影响图表的y值.它有效,但外观令人失望,不适合移动设备.

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

我不认为Bostock使用除D3以外的任何东西来构建他的滑块和样式.

我试图查看他的源代码,但没有运气搞清楚.

在my sample fiddle,我使用JqueryUI滑块($(“< div class ='slider'>< / div>”).insertAfter(输入).slider())和一些CSS.

我还没有找到D3的功能可以帮助我的图表看起来更像他的吗？

如果你可以指出我如何创建(和样式)滑块,y值标签和轴的正确方向,我真的很感激.

解决方法:

这是一个非常简单的演示,我从头开始编写,因此不是基于你的小提琴中的代码,显示了你想要创建的dataviz的基本方面.

在这个演示中,我只使用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;

}

说明：

在这个例子中,我使用滑块的常规HTML输入：

然后,我们使用此函数获取该滑块的更改：

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);

标签：jquery,javascript,css,d3-js

来源： https://codeday.me/bug/20190522/1154549.html