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

选择(“svg”)—两个备选方案之间的区别

d3.js html

Aenaon · 技术社区 · 7 年前

我对此有点困惑。我以为它们是等价的表达,但显然不是。下面是做饼图的一段代码的起始行。这样可以很好地工作,并且转换会将图表移动到svg的中心

var width = 280,
    height = 200,
    radius = Math.min(width, height) / 2;

var svg = d3.select("#pie")
    .select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

但是我试着移动 width 和 height 宽度 和 高度

<div class="chart-stage" id="pie">
      <svg width="280" height="200"></svg>
</div>

我想我一定是把svg链接搞错了

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

var width = +svg.attr("width"),
    height = +svg.attr("height")

var radius = Math.min(width, height) / 2;

svg.attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

1 回复 | 直到 7 年前

Andrew Reid 7 年前

svg g 具有变换的元素。在第二个 svg格式 指选定的元素。 svg格式 克 svg.append() 将附加一个兄弟姐妹 克 :

var svg = d3.select("#pie")       // return a selection of the element with id pie
    .select("svg")                // return a selected of the svg
    .attr("width", width)         // return the same svg
    .attr("height", height)       // return the same svg
    .append("g")                  // return a selected g element
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");  // return the selected g element.

在这里 svg格式 克 元素。

var svg = d3.select("#pie")   // return a selection of the element with id pie
            .select("svg");    // return a selection of the svg

svg格式 -初始链接完成后,后续操作: svg.attr().append() 不要更改变量的定义。

svg格式 变量作为子对象的选择 克

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

var width = +svg.attr("width"),
    height = +svg.attr("height")

svg = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

不过,把这个变量称为因为这是一个选择 克 svg格式 .

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

10 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前