javascript - 使用带刻度的相同可重复字符串值
问题描述
我是 D3 的新手,想用 6 个水平条绘制图表。我的 xAxis 与它们的值是 scaleLinear。所以我希望 yAxis 只是一个包含每个条形名称的列表。所以对于 yScale,我有 6 个名称 - ['Games'、'Apps'、'Games'、'Apps'、'Games'、'Apps']
所以当我使用这个 yScale 时:
var params = ['Games', 'Apps', 'Games', 'Apps', 'Games', 'Apps'];
var yScale = d3.scaleBand()
.domain(params)
.range([0, 300])
解决方案
您在这里看到的是任何序数比例的默认(和预期)行为:值必须是唯一的。
如果您查看API,您会看到(强调我的):
域值内部存储在从字符串化值到索引的映射中;然后使用生成的索引来确定波段。因此,波段标度的值必须可强制转换为字符串,并且域值的字符串化版本唯一地标识相应的波段。
因此,这里的任何解决方案都将是一个 hacky 解决方案。话虽如此,一个简单的解决方案是为数组的每个元素添加一个无意义的唯一值。例如,使用数组中元素的索引:
const params = ['Games', 'Apps', 'Games', 'Apps', 'Games', 'Apps'].map(function(d, i) {
return d + "-" + i;
});
然后我们只需删除那些用于创建轴的索引,使用tickFormat
:
const yAxis = d3.axisLeft(yScale)
.tickFormat(function(d) {
return d.split("-")[0];
});
这是一个演示:
const svg = d3.select("svg");
const params = ['Games', 'Apps', 'Games', 'Apps', 'Games', 'Apps'].map(function(d,i) {
return d + "-" + i;
});
const yScale = d3.scaleBand()
.domain(params)
.range([2, 148]);
const yAxis = d3.axisLeft(yScale)
.tickFormat(function(d) {
return d.split("-")[0];
});
yAxis(svg.append("g").attr("transform", "translate(100,0)"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
推荐阅读
- python - 分配标签:所有值都是假的
- xmldiff - https://docs.microsoft.com/en-us/previous-versions/dotnet/articles/aa302294(v=msdn.10) 中的 XmlDiff 和补丁使用场景
- python - Random.choice 仅从一行文件中选择
- javascript - 多次调用渲染器不起作用
- excel - Excel 公式 - 测试日期和乘法索引
- c++ - 如何对等待 malloc 完成所花费的时间进行基准测试?
- c# - Unity3D:在平移和旋转后将子对象置于其原始位置
- typescript - dynogels 总是告诉我 Invalid schema content 即使使用它的 github repo 中的示例
- java - 如何将输入(84 23 75 24)输入到数组中?
- deployment - 如何在 Leiningen 部署到 Clojars 时包含非 Clojure 源文件?