代码之家 › 专栏 › 技术社区 › Jimmy

D3-删除填充以使图形填充页面

svg d3.js javascript

Jimmy · 技术社区 · 7 年前

我认为这很简单,例如,只需将下面的代码设置为0即可。然而,这迫使事情脱离了页面。

// 2. Use the margin convention practice 
var margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  },

有人能帮我弄一张适合车身高度和宽度的图表吗?

1 回复 | 直到 7 年前

agsigma 7 年前

当您将页边距设置为 0 图中拟合了车身的高度和宽度。问题出在轴标签和记号上:

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale));

您正在图形下方移动轴。如果我是你,我会把页边距改为最小值,这样轴刻度和标签就可以放在页面上。或者,您可以尝试根据轴的大小更改图形的宽度和高度,但我认为这是痛苦的,不值得付出努力。

所以我只想:

margin = {
    top: 10,
    right: 35,
    bottom: 20,
    left: 30
}

还有另一种解决方案-更改坐标轴标签并将其放置在图形中-然后可以将边距更改为 0

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

8 月前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

9 月前

man · CSS-如何具有或模拟仅适用于内部的半径边框

10 月前

McLaren · 增加笔划宽度属性后,图标将被裁剪

10 月前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

1 年前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

1 年前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

1 年前

MarcelausZell · 调整svg的大小会导致额外的高度

1 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

1 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

1 年前