Question

我有一个D3区域图表，正如我想要的那样绘制。我试图通过窗口调整大小。它水平正确调整大小，但垂直方向似乎是根据其原始高度设置的。这是使用Safari 9.0.2。很难描述它在这里做的是什么截图：

这是我的代码：

<html>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style>

#graph 
{
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

<body>
<svg id="graph"></svg>

<script>

var width = parseInt(d3.select("#graph").style("width"));
var height = parseInt(d3.select("#graph").style("height"));

var parseDate = d3.time.format("%d-%b-%y").parse;

var xScale = d3.time.scale()
    .range([0, width]);

var yScale = d3.scale.linear()
    .range([height, 0]);

var actual = d3.svg.area()
    .x(function(d) { return xScale(d.date); })
    .y0(height)
    .y1(function(d) { return yScale(d.actual); });

var svg = d3.select("#graph")

function resize() 
{
    width = parseInt(d3.select("#graph").style("width"))
    height = parseInt(d3.select("#graph").style("height"));

    xScale.range([0, width]);
    yScale.range([height, 0]);

    svg.selectAll("#actual")
       .attr("d", actual);
}

d3.select(window).on('resize', resize); 

d3.csv("areachart.csv", function(error, data) 
{
    data.forEach(function(d, i) 
    {
        d.date = parseDate(d.date);
        d.actual = +d.actual;
    });

    xScale.domain(d3.extent(data, function(d) { return d.date; }));
    yScale.domain([0, d3.max(data, function(d) { return d.actual; })]);

    svg.append("path")
        .attr("id", "actual")
        .datum(data)
        .attr('fill', 'red')
        .attr("d", actual);

});

</script>
</body>
</html>

这是areachart.csv：

date,actual
1-Jan-16,400
1-Feb-16,500
1-Mar-16,634
1-Apr-16,408
1-May-16,185
1-Jun-16,500
1-Jul-16,467
1-Aug-16,456
1-Sep-16,900
1-Oct-16,108
1-Nov-16,200
1-Dec-16,466

有人知道如何解决这个问题吗？谢谢。安德鲁。

Answer 1

在调整大小时，似乎是根据其原始高度垂直设置，因为svg区域设置未在resize函数中更新：

svg.selectAll("#actual")
   .attr("d", actual);

这里，用于绘制d的函数仍然使用初始高度：

var actual = d3.svg.area()
.x(function(d) { return xScale(d.date); })
.y0(height) // initial height
.y1(function(d) { return yScale(d.actual); });

尝试在resize函数中包含高度更新应该有效。

Answer 2

谢谢风水的帮助。我终于搞定了。以下是我的完整答案：

<html>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style>
    #graph 
    {
        width: 100%;
        height: 100%;
        position: absolute;
    }
</style>

<body>
<svg id="graph"></svg>

<script>

var width = parseInt(d3.select("#graph").style("width"));
var height = parseInt(d3.select("#graph").style("height"));

var parseDate = d3.time.format("%d-%b-%y").parse;

var xScale = d3.time.scale()
    .range([0, width]);

var yScale = d3.scale.linear()
    .range([height, 0]);

function actualArea()
{
    var actual = d3.svg.area()
        .x(function(d) { return xScale(d.date); })
        .y0(height)
        .y1(function(d) { return yScale(d.actual); });
    return actual
}

var svg = d3.select("#graph")

function resize() 
{
    width = parseInt(d3.select("#graph").style("width"))
    height = parseInt(d3.select("#graph").style("height"));

    xScale.range([0, width]);
    yScale.range([height, 0]);

    svg.selectAll("#actual")
        .attr("d", actualArea());
}

d3.select(window).on('resize', resize); 

d3.csv("areachart.csv", function(error, data) 
{
    data.forEach(function(d, i) 
    {
        d.date = parseDate(d.date);
        d.actual = +d.actual;
    });

    xScale.domain(d3.extent(data, function(d) { return d.date; }));
    yScale.domain([0, d3.max(data, function(d) { return d.actual; })]);

    svg.append("path")
        .attr("id", "actual")
        .datum(data)
        .attr('fill', 'red')
        .attr("d", actualArea());

});

</script>
</div>
</body>

调整D3区域图表的大小

2 个答案: