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 (将#修改为@）

violin-plot

d3js 通过改变 bin 的数量来制作小提琴图动画

问题描述

解决方法

相关问答