D3.js 调整D3面积图的大小_D3.js

D3.js 调整D3面积图的大小

d3.js

D3.js 调整D3面积图的大小,d3.js,D3.js,我有一个D3面积图，正按照我的要求绘制。我试着使它与窗口一起调整大小。它在水平方向上可以正确调整大小，但在垂直方向上似乎是根据其原始高度设置的。这是在使用Safari 9.0.2。很难描述它在做什么，以下是一些屏幕截图：这是我的密码： <html> <meta charset="utf-8"> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> &

我有一个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>

请问有人知道如何解决这个问题吗？谢谢Andrew。

在调整大小时，它似乎是基于其原始垂直高度设置的，因为svg区域设置未在调整大小功能中更新：

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); });

尝试在“调整大小”功能中包含高度更新应该可以工作

谢谢风水的帮助。我终于让它工作了。以下是我的完整答案：

<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>

谢谢你的回答；有没有想过我该怎么做。我尝试过的所有事情都没有奏效。谢谢，你能在plunker或JSFIDLE上发布你的代码吗？我不知道你描述的第二张图片是从哪里来的。在仔细阅读你的答案后，我成功地实现了这一点。对于阅读本文的其他人来说，第二张图片是窗口垂直展开时图表的结果。安得烈

<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>