Question

我正在调整barchart with an update function的一些代码，但是在正确设置X和Y轴时遇到了问题。

首先，Y轴显示错误的数据，而x轴根本不显示任何数据。同样，更新后，y和x轴错误。

在该示例中，一切似乎都正常，但我不明白是什么导致我的代码失败。有人可以告诉我怎么了吗？

这是代码：

<!DOCTYPE html>
<meta charset="utf-8">

<style> /* set the CSS */

body { font: 12px Arial;} 

.bar { fill: steelblue; }

.toolTip {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
}

/*opmaak legenda*/
.legend {
  font-size: 10px;
  text-anchor: middle;
}
</style>
<body>

<form>
    <select name="year" id="year">
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012" selected>2012</option>
    </select>
</form>


<!-- load the d3.js library -->
<script src="//d3js.org/d3.v4.min.js"></script>

<script>
// set the dimensions and margins of the graph  
var margin = {top: 40, right: 50, bottom: 50, left: 65},
    width = 700 - margin.left - margin.right,
    height = 425 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);


var y_axis = d3.axisLeft(y);
var x_axis = d3.axisBottom(x);


// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").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 + ")");

    // add the x Axis
svg.append("g")
     .attr("class", "axis")
     .attr("transform", "translate(0," + height + ")")//;
     .call(x_axis);

    // add the y Axis
svg.append("g")
    .attr("class", "axis") //;
    .call(y_axis);      

    // Add a small label for the graph name.
svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", - 35)
    .attr("x", 0 - (height / 2))
    .style("text-anchor", "middle")
    .style("font-size", 13)
    .text("x miljard euro");


svg.append("text")
    .attr("x", 0)  // space legend
    .attr("y", height + 40)
    .attr("class", "legend")    // style the legend
    .style("text-anchor", "middle")
    .style("font-size", 11)
    .text("Bron: Eigen berekening"); 

function update(year) {
    d3.csv('monthly_data_' + year + '.csv', function(data) {


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

x.domain(data.map(function(d) { return d.month; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);


// Define the div for the tooltip
var tooltip = d3.select("body").append("div").attr("class", "toolTip");


    var bars = svg.selectAll('.bar')
        .data(data);

    //exit
    bars
        .exit()
        .remove();

    //enter
    var new_bars = bars
        .enter().append('rect')
        .attr('class', 'bar')
        .attr('height', 0)
        .attr('y', height)
        .attr('width', x.bandwidth());

    //update
    new_bars.merge(bars)
        //.transition(t)
        .attr('x', function(d) {return x(d.month);})
        .attr('y', function(d) {return y(d.value);})
        .attr('height', function(d) {return height - y(d.value);})
        //.attr('fill', function(d) {return colour_scale(d.value);
        .on("mousemove", function(d){
            tooltip
            .style("left", d3.event.pageX + 10 + "px")
            .style("top", d3.event.pageY - 25 + "px")
            .style("display", "inline-block")
            .html((d.month) + "<br>" + "€ " + (d.value) + " miljard");
    })
        .on("mouseout", function(d){ tooltip.style("display", "none");});                 

var y_axis = d3.axisLeft(y);
var x_axis = d3.axisBottom(x);


    svg.select('.x.axis')
        .call(x_axis);

    svg.select('.y.axis')
        .call(y_axis);

});
}

var select = d3.select('#year');
select.on('change', function() {
    console.log(this.value);
    update(this.value);
})

update('2012');

</script>
</body>

这是数据：

monthly_data_2009.csv
month,value
Jan,46396
Feb,33159
Mar,33494
Apr,33385
May,38177
Jun,95841
Jul,46438
Aug,42125
Sep,37893
Oct,37636
Nov,45746
Dec,160841

monthly_data_2010.csv
month,value
Jan,43009
Feb,42299
Mar,42677
Apr,37992
May,44881
Jun,93920
Jul,45514
Aug,43251
Sep,41273
Oct,46500
Nov,49092
Dec,133044

monthly_data_2011.csv
month,value
Jan,43920
Feb,36070
Mar,33698
Apr,33882
May,35240
Jun,76949
Jul,41603
Aug,36160
Sep,32501
Oct,33520
Nov,33592
Dec,122095

monthly_data_2012.csv
month,value
Jan,38921
Feb,30774
Mar,33217
Apr,27501
May,31522
Jun,72441
Jul,31661
Aug,27590
Sep,29600
Oct,28737
Nov,31191
Dec,120922

Answer 1

如果您复制示例，请更正

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')');

svg.append('g')
    .attr('class', 'y axis');

每次更新是否需要新的工具提示div？

带有d3的条形图的x和y轴问题

1 个答案: