Question

我似乎无法将xaxis和yaxis放在SVG的左下角。

<!DOCTYPE html>
<html>
<head>
<style>
svg {width:350px; height:280px;border-style:solid;}
</style>
</head>

<body>
<svg />

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var x = d3.scale.linear().domain([0, 80]).range([0, 200]);
var y = d3.scale.linear().domain([0, 80]).range([200, 0]);

var xaxis = d3.svg.axis().scale(x).orient('bottom').ticks(4);
var yaxis = d3.svg.axis().scale(y).orient('left').ticks(4);

var svg = d3.select('svg');
//svg.attr('width', 300).attr('height', 300);
svg.append('g').attr('class', 'xaxis').call(xaxis);
svg.append('g').attr('class', 'yaxis').call(yaxis);
</script>
</body>
</html>

就像轴完全无法找到SVG尺寸一样。

我在轴实例化和教程之间看到的唯一区别是它们经常在运行中创建SVG元素。不过我更愿意在HTML中手动将SVG放在任何地方......

Answer 1

这里发生了一些事情。

看看我的小提琴https://jsfiddle.net/guanzo/e0xp6ae3/

- scale(x).orient('bottom')指示轴刻度的位置，而不是轴本身的位置。我通过添加.attr('transform','translate(0,'+280+')')来修复此问题，其中280是轴的所需y高度。

-svg默认隐藏其溢出。在我的第一个小提琴中，我用position: relative和left:20px一起破解了一个解决方案。这是你看到的一个可怕的解决方案。

D3惯例是使用边距，例如https://bl.ocks.org/mbostock/3019563。

通过动态创建svg元素，我们可以实现更清晰，更灵活的代码。查看我在D3方式之后更新的小提琴。

https://jsfiddle.net/guanzo/e0xp6ae3/1/

基本上，轴的空间由边距给出。 svg宽度和高度围绕边缘。当然，您仍然可以使用硬编码的svg，您只需要更改代码以适应。

D3.js轴不符合SVG大小

1 个答案: