带排序条形图的d3 v4单选按钮

试图将单选按钮值传递给对条形图进行排序的函数change（）。带排序条形图的d3 v4单选按钮

首先我有一组单选按钮，

<form id="form"> 
    <input type="radio" name="stack" value="val1">val1<br> 
    <input type="radio" name="stack" value="val2">val2<br> 
    <input type="radio" name="stack" value="val3">val3<br> 
    </form>

我通过从所检查的单选按钮的功能被称为变化（）的值，

d3.selectAll("input[name='stack']").on("change", change);

此更改功能应该将xAxis分类，

function change() { 
    console.log(this.value); // outputs correctly 

    var x0 = x.domain(data.sort(this.value = "val1" ? 
     function(a, b) { 
      return b.val1 - a.val1; 
     } : 
     function(a, b) { 
      return d3.ascending(a.name, b.name); 
     }) 
     .map(function(d) { 
     return d.name; 
     })) 
    .copy(); 

    svg.selectAll(".bar") 
    .sort(function(a, b) { 
     return x0(a.name) - x0(b.name); 
    }); 

    var transition = svg.transition().duration(750), 
    delay = function(d, i) { 
     return i * 50; 
    }; 

    transition.selectAll(".bar") 
    .delay(delay) 
    .attr("x", function(d) { 
     return x0(d.name); 
    }); 

    transition.select(".x.axis") 
    .call(xAxis) 
    .selectAll("g") 
    .delay(delay); 
}

我得到一个错误，

Uncaught TypeError: t.apply is not a function

并且参照

.call(xAxis)

x轴是与该代码先前创建的线，

var xAxis = svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x));

余可使用是不正确sort（）中的三元运算符。

谢谢

来源

2017-08-04 Shane G

您可以创建小提琴哪里这个问题将提交？ – bumbeishvili

jsfiddle https://jsfiddle.net/ofey/ydg8qs4t/4/谢谢 –

我现在看到我应该将这个类添加到bars .attr（'class'，'bar'）;并且对val1和name进行排序实际上不会导致更改，因为它们的顺序相同。 –

我想出了如何用三个单选按钮对这个条形图进行排序。如果使用其他格式，我使用三元运算符。

而且这里是jsfiddle和Github和gh-pages

<!DOCTYPE html> 

<body> 
    <div> 
    <form id="form"> 
     <input type="radio" name="stack" value="val1">blue (val1) 
     <br> 
     <input type="radio" name="stack" value="val2">white (val2) 
     <br> 
     <input type="radio" name="stack" value="val3">green (val3) 
     <br> 
    </form> 
    </div> 
    <div id="bar_chart"> 
    </div> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <script> 
    var data = [{ 
     "name": "A", 
     "val1": 10, 
     "val2": 6, 
     "val3": 1 

    }, { 
     "name": "B", 
     "val1": 8, 
     "val2": 7, 
     "val3": 3 
    }, { 
     "name": "C", 
     "val1": 9, 
     "val2": 5, 
     "val3": 4 
    }] 

    data.forEach(function(d) { 
     d.value = +d.value; 
    }); 

    var margin = { 
     top: 50, 
     right: 50, 
     bottom: 100, 
     left: 80 
     }, 
     width = 1500 - margin.left - margin.right, 
     height = 600 - margin.top - margin.bottom; 

    var x = d3.scaleBand() 
     .domain(data.map(function(d) { 
     return d.name 
     })) 
     .range([0, width/4]); 

    var y1 = d3.scaleLinear() 
     .domain([0, d3.max(data, function(d) { 
     return d.val1 
     })]) 
     .range([height, 0]); 

    var y2 = d3.scaleLinear() 
     .domain([0, d3.max(data, function(d) { 
     return d.val2 
     })]) 
     .range([height, 0]); 

    var y3 = d3.scaleLinear() 
     .domain([0, d3.max(data, function(d) { 
     return d.val3 
     })]) 
     .range([height, 0]); 

    var svg = d3.select("#bar_chart") 
     .data(data) 
     .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 + ")"); 

    var xAxis = d3.axisBottom(x) 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    // Add the Y Axis 
    svg.append("g") 
     .attr("class", "axis") 
     .call(d3.axisLeft(y1) 
     .ticks(7)); 

    var tooltip = d3.select("#info") 
     .append("div") 
     .style("position", "absolute") 
     .style("z-index", "10") 
     .style("visibility", "hidden"); 

    var rects = svg.selectAll('rect') 
     .data(data); 

    //********* Bar Chart 1 **************** 
    var newRects1 = rects.enter(); 

    newRects1.append('rect') 
     .attr('x', function(d, i) { 
     return x(d.name); 
     }) 
     .attr('y', function(d, i) { 
     return y1(d.val1); 
     }) 
     .attr('height', function(d, i) { 
     return height - y1(d.val1) 
     }) 
     .attr('opacity', 0.85) 
     .attr("class", "bar") 
     .attr('width', 40) 
     .attr("transform", "translate(" + 27 + ",0)") 
     .style('fill', 'blue') 
     .style('stroke', 'gray') 
     .attr('class', 'bar'); 

    //********* Bar Chart 2 **************** 
    var newRects2 = rects.enter(); 

    newRects2.append('rect') 
     .attr('x', function(d, i) { 
     return x(d.name); 
     }) 
     .attr('y', function(d, i) { 
     return y1(d.val2); 
     }) 
     .attr('height', function(d, i) { 
     return height - y1(d.val2) 
     }) 
     .attr('opacity', 0.85) 
     .attr('width', 40) 
     .attr("transform", "translate(" + 37 + ",0)") 
     .style('fill', 'white') 
     .style('stroke', 'gray') 
     .attr('class', 'bar'); 

    //********* Bar Chart 3 **************** 
    var newRects3 = rects.enter(); 

    newRects3.append('rect') 
     .attr('x', function(d, i) { 
     return x(d.name); 
     }) 
     .attr('y', function(d, i) { 
     return y1(d.val3); 
     }) 
     .attr('height', function(d, i) { 
     return height - y1(d.val3) 
     }) 
     .attr('width', 40) 
     .attr('opacity', 0.95) 
     .attr("transform", "translate(" + 47 + ",0)") 
     .style('fill', 'green') 
     .style('stroke', 'gray') 
     .attr('class', 'bar'); 

    d3.selectAll("input[name='stack']").on("change", change); 

    function change() { 

     var x0 = x.domain(data.sort(this.value == "val1" ? 
      (function(a, b) { 
      return b.val1 - a.val1; 
      }) : ((this.value == "val2") ? 
      (function(a, b) { 
       return b.val2 - a.val2; 
      }) : (function(a, b) { 
       return b.val3 - a.val3; 
      }))).map(function(d) { 
      return d.name; 
     })) 
     .copy(); 

     svg.selectAll(".bar") 
     .sort(function(a, b) { 
      return x0(a.name) - x0(b.name); 
     }); 

     var transition = svg.transition().duration(750), 
     delay = function(d, i) { 
      return i * 50; 
     }; 

     transition.selectAll(".bar") 
     .delay(delay) 
     .attr("x", function(d) { 
      return x0(d.name); 
     }); 

     transition.select(".x.axis") 
     .call(xAxis) 
     .selectAll("g") 
     .delay(delay); 
    } 
    </script>

来源

2017-08-06 11:33:01

带排序条形图的d3 v4单选按钮

回答

相关问题