D3棒グラフの縦軸

d3.jsバージョン4を使用して棒グラフを作成しようとしていますが、縦軸を作成しようとしていて、次のエラーが表示されます：Bn（d3.min。 JS：2）Kn.vpで[やすさなど]（d3.min.js：5）main.jsで：88D3棒グラフの縦軸

ここでは私のコードです：

代わり

var bardata = []; 
 

 
for (var i=0; i < 20; i++){ 
 
    bardata.push(Math.random()) 
 
} 
 

 
bardata.sort(function compareNumbers(a,b){ 
 
    return a -b; 
 
}) 
 

 
var height = 400, 
 
    width = 600, 
 
    barWidth = 50, 
 
    barOffset = 5; 
 
var tempColor; 
 

 
var yScale = d3.scaleLinear() 
 
    .domain([0, d3.max(bardata)]) 
 
    .range([0, height]); 
 

 
var xScale = d3.scaleBand() 
 
    .domain(d3.range(0, bardata.length)) 
 
    .padding(0.1) 
 
    .range([0, width]); 
 

 
var tooltip = d3.select('body').append('div') 
 
.style('position', 'absolute') 
 
.style('padding', '0 10px') 
 
.style('background', 'white') 
 
.style('opacity', 0) 
 

 
var myChart = d3.select('#chart').append('svg') 
 

 
    .attr('width', width) 
 
    .attr('height', height) 
 
    .append('g') 
 
    .style('background', '#C9D7D6') 
 
    .selectAll('rect').data(bardata) 
 
    .enter().append('rect') 
 
    .style('fill', '#C61C6F') 
 
    .attr('width', xScale.bandwidth()) 
 
    
 

 
.attr('x', function(d, i) { 
 
    return xScale(i); 
 
    }) 
 
.attr('height', 0) 
 
.attr('y', height) 
 

 
.on('mouseover', function(d){ 
 
    d3.select(this) 
 
    .style('opacity', 0.5) 
 
}) 
 
.on('mouseleave', function(d){ 
 
    d3.select(this) 
 
    .style('opacity', 1) 
 
}) 
 
.on('mouseover', function(d){ 
 
    tooltip.transition() 
 
    .style('opacity', 0.9) 
 
    tooltip.html(d) 
 
    .style('left', (d3.event.pageX - 35) + 'px') 
 
    .style('top', (d3.event.pageY - 30) + 'px') 
 
    
 
    tempColor = this.style.fill; 
 
    d3.select(this) 
 
    .style('opacity', 0.5) 
 
    .style('fill', 'yellow') 
 
}) 
 
.on('mouseleave', function(d){ 
 
    tempColor = this.style.fill; 
 
    d3.select(this) 
 
    .style('opacity', 1) 
 
    .style('fill', '#C61C6F') 
 
}) 
 

 
myChart.transition() 
 
.attr('height', function(d){ 
 
    return yScale(d); 
 
}) 
 
.attr('y', function(d){ 
 
    return height - yScale(d); 
 
}) 
 
.delay(function(d, i){ 
 
    return i * 20; 
 
}) 
 
.duration(1000) 
 
.ease('elastic') 
 

 
var vAxis = d3.svg.axis() 
 
.scale(yScale) 
 
.orient('left') 
 
.ticks(10) 
 

 
var vGuide = d3.select('svg').append('g') 
 
vAxis(vGuide) 
 

 
vGuide.attr('transform', 'translate(35,0)')

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Line Chart</title> 
 
    <meta charset="8-UTF"> 
 
    <link rel="stylesheet" src="css/style.css"> </head> 
 

 
<body> 
 
    <div class="container"> 
 
     <h2>Bar Chart</h2> 
 
     <div id="chart"></div> 
 
    </div> 
 
    <script src="js/d3.min.js"></script> 
 
    <script src="js/main.js"></script> 
 
</body> 
 

 
</html>

出典

2017-03-15 jissylarry

@GerardoFurtado vGuideはSVGにグラムを追加されている必要があり、それは、グラムタグでSVGにダニを追加し、それは:) – jissylarry

を働いていたので、ありがとうございました申し訳ありませんが、私は盲目でなければなりません、私はvとyを混乱させました... –

myChart.transition() 
.attr('height', function(d){ 
    return yScale(d); 
}) 
.attr('y', function(d){ 
    return height - yScale(d); 
}) 
.delay(function(d, i){ 
    return i * 20; 
}) 
.duration(1000) 
.ease('elastic')//INCORRECT

それは

myChart.transition() 
.attr('height', function(d){ 
    return yScale(d); 
}) 
.attr('y', function(d){ 
    return height - yScale(d); 
}) 
.delay(function(d, i){ 
    return i * 20; 
}) 
.duration(1000) 
.ease(d3.easeElastic)

作業コードhere

出典

2017-03-15 10:11:56 Cyril

答えて

関連する問題