好吧，我是 D3.JS 的新手，我对创建 svg block 的方式感到非常惊讶，我发现它令人不知所措，我将解释我自己，例如我需要编写这样的 HTML div block 
使用 HTML 和 CSS 非常容易和简单，代码可重用，使用 D3 我通过附加和静态 x 和 y 以及一些奇怪的方式添加字形的 attem 将它们附加到根 svg 找到了我的自定义项，好吧，它给了我类似的东西:
svg.attr({ width: 500, height: 500 });
var rectangle = svg.append("rect").
attr("width", 300).
attr("height", 100).attr("fill", "#3b3e3f");
var rectangleIndexes = svg.append("rect").
attr("width", 50).
attr("height", 100).attr("fill", "#303233");
var edit = svg.append("rect").
attr("width", 30).
attr("height", 30).
attr("x", 10).
attr("y", 10).
attr("fill", "#454a4d");
var editBtn = svg.append("svg:foreignObject")
.attr("width", 20)
.attr("height", 20)
.attr("y", "15px")
.attr("x", "18px")
.append("xhtml:span")
.attr("class", "control glyphicon glyphicon-pencil")
.attr("style", "color :#fff");
etc...
有没有其他方法可以做到这一点，因为我已经习惯了 html/css 如果我们可以在 svg 或更简单和可重用的东西中导入 html 代码，那将会很棒。
感谢您的帮助。
最佳答案
第一个问题，如果你想要 HTML/CSS 为什么要将它们附加到 SVG？
第二，d3 并不意味着您不能使用 CSS。如果你不想，你不必使用内联样式。只需给他们分配一个类(class)。
第三，您错过了 d3 的要点。这一切都是关于通过数据驱动您的显示(3ds 是数据数据d驱动d文档)。您在此处的数据将是每个“ block ”的数组元素。
像这样的东西(请原谅我糟糕的 CSS):
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<style>
.my-block {
width: 100px;
height: 100px;
background-color: steelblue;
box-shadow: 10px 10px 5px #888888;
float: left;
margin: 20px;
position: relative;
}
.icon {
position:absolute;
top: 80px;
right: 5px;
color: #fff;
}
.text {
position:absolute;
top: 40px;
left: 25px;
color: #fff;
}
</style>
</head>
<body>
<script>
var data = [
{
name: "block 1",
icon: "glyphicon-pencil"
},{
name: "block 2",
icon: "glyphicon-film"
},{
name: "block 3",
icon: "glyphicon-off"
},{
name: "block 4",
icon: "glyphicon-user"
}
];
var body = d3.select('body');
var divs = body.selectAll('.my-block')
.data(data)
.enter()
.append('div')
.attr('class', 'my-block')
divs.append('span')
.text(function(d){
return d.name;
})
.attr("class", "text");
divs.append('span')
.attr("class", function(d){
return "icon control glyphicon " + d.icon;
});
</script>
</body>
</html>关于javascript - 在 D3.JS 中创建元素 block 的最佳方法是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42861740/