我有一个用 D3 绘制条形图的功能。我需要将此 CSS 元素添加到我的结构中:
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
我不明白应该将这些 css 元素映射到哪些变量或如何映射。
我用过this example对于我的代码。基本上我正在尝试映射这些 css 元素，例如:
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("font-family","sans-serif")
.style("font-size","10px")
.style("text-anchor", "end")
.text("Publications");
但我不知道如何映射.axis path、.axis line 和.x.axis path css 元素。如果有任何帮助，我将不胜感激。
最佳答案
<html>
<head>
<style>
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
</head>
<body>
<script>
svg = ...// Your code here
yAxis = ...// Your code here
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("font-family","sans-serif")
.style("font-size","10px")
.style("text-anchor", "end")
.text("Publications");
</script>
</body>
</html>
当你执行 .call(yAxis) , d3 创建与轴相关的 <path>和 <line> <g class="y axis"> 中的节点.一旦 d3 创建它们，这些节点将满足 <style> 中的 css 选择器。 (例如 .axis path )并关闭中风等。我相信这回答了我认为你在问什么。
关于javascript - 将 CSS 元素映射到 D3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29659864/