如何解决d3js 通过改变 bin 的数量来制作小提琴图动画
我是个新手,刚开始接触编码。所以,我正在尝试自己学习使用 d3js 可视化大数据所需的一切……我刚刚开始接触 JS、html 等。
我发现了生成 violinplot(https://www.d3-graph-gallery.com/graph/violin_basicHist.html) 的代码。我想操纵它,以便用户可以设置预期的 Bins 数量(玩弄分辨率)。我尝试的是插入一个字段,用户可以设置“bins”并尝试在脚本中创建更新功能。我知道它不起作用,但我不知道如何使它起作用。非常乐意提供任何帮助!
<body>
<h4> Playing with resolution of a violin plot </h4>
<p></p>
<label>How many Bins to you excpect: </label>
<fieldset>
<input type="number",min="1",value="20",step="10",id="nBin"/>
</fieldset>
<script>
var margin = {top: 10,right: 30,bottom: 30,left: 40},width = 460 - margin.left - margin.right,height = 400 - margin.top - margin.bottom;
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv",function(data) {
var y = d3.scaleLinear()
.domain([ 3.5,8 ])
.range([height,0])
svg.append("g").call( d3.axisLeft(y) )
var x = d3.scaleBand()
.range([ 0,width ])
.domain(["setosa","versicolor","virginica"])
.padding(0.05)
svg.append("g")
.attr("transform","translate(0," + height + ")")
.call(d3.axisBottom(x))
function update(nBin){
var histogram = d3.histogram()
.domain(y.domain())
.thresholds(y.ticks(nBin)) // get the user input of nBin?
.value(d => d)
var sumstat = d3.nest()
.key(function(d) { return d.Species;})
.rollup(function(d) {
input = d.map(function(g) { return g.Sepal_Length;})
bins = histogram(input)
return(bins)
})
.entries(data)
var maxnum = 0
for ( i in sumstat ){
allBins = sumstat[i].value
lengths = allBins.map(function(a){return a.length;})
longuest = d3.max(lengths)
if (longuest > maxnum) { maxnum = longuest }
}
var xnum = d3.scaleLinear()
.range([0,x.bandwidth()])
.domain([-maxnum,maxnum])
svg
.selectAll("myViolin")
.data(sumstat)
.enter()
.append("g")
.attr("transform",function(d){ return("translate(" + x(d.key) +",0)") } )
.append("path")
.datum(function(d){ return(d.value)})
.style("stroke","none")
.style("fill","#69b3a2")
.attr("d",d3.area()
.x0(function(d){ return(xnum(-d.length)) } )
.x1(function(d){ return(xnum(d.length)) } )
.y(function(d){ return(y(d.x0)) } )
.curve(d3.curveCatmullRom)
)
}
update(20)
d3.select("#nBin").on("input",function() {
update(+this.value);
});
});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。