分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了d3js 通过改变 bin 的数量来制作小提琴图动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_262_0@如何解决d3js 通过改变 bin 的数量来制作小提琴图动画？开发过程中遇到d3js 通过改变 bin 的数量来制作小提琴图动画的问题如何解决？下面主要结合日常开发的经验，给出你关于d3js 通过改变 bin 的数量来制作小提琴图动画的解决方法建议，希望对你解决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>