d3.js - 使用 tickSizeOuter(0) 删除 y 轴结束刻度不起作用
问题描述
(i) 我正在尝试删除 y 轴结束刻度,但tickSizeOuter(0)
在这种情况下对我没有帮助。
(ii) 我还想在 y 轴结束刻度值 (60) 之后有一些填充,类似于 x 轴。我试过了padding
,paddingOuter
但这对我没有帮助。
这是堆栈闪电战。
这是我的代码:
maxAllowed = 60;
graphData = [
{
hrCount: 4,
resCount: 2
},
{
hrCount: 8,
resCount: 5
},
{
hrCount: 12,
resCount: 10
},
...
const margin = { top: 25, right: 25, bottom: 25, left: 25 };
const width =
document.getElementById("svgcontainer").parentElement.offsetWidth -
(margin.left + margin.right);
const height =
document.getElementById("svgcontainer").parentElement.offsetHeight -
(margin.top + margin.bottom);
// Remove any existing SVG
d3.select("#svgcontainer")
.selectAll("svg > *")
.remove();
// Group
const g = d3
.select("#svgcontainer")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
// Scale
// x-scale
const xScale = d3
.scaleBand()
.domain(this.graphData.map((d: any) => d.hrCount))
.range([0, width]);
// y-scale
const yScale = d3
.scaleLinear()
.domain([0, this.maxAllowed])
.range([height, 0]);
// y-axis gridline
g.append("g")
.attr("class", "y-axis-grid")
.call(
d3
.axisLeft(yScale)
.tickSize(-width)
.tickFormat("")
.ticks(5)
);
// Axis
// x-axis
const xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
g.append("g")
.attr("transform", "translate(0, " + height + ")")
.attr("class", "graph-axis")
.call(xAxis.scale(xScale))
.append("text")
.attr("x", width)
.attr("y", -6)
.attr("text-anchor", "end")
.attr("font", "10px sans-serif")
.attr("letter-spacing", "1px")
.attr("fill", "#8997b1")
.text("Hours");
// y-axis
const yAxis = d3
.axisLeft(yScale)
.ticks(5)
.tickSizeOuter(0);
g.append("g")
.attr("class", "graph-axis")
.call(yAxis.scale(yScale))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.attr("font", "10px sans-serif")
.attr("letter-spacing", "1px")
.attr("fill", "#8997b1")
.text("Resources");
// Data line
const line = d3
.line()
.x((d: any) => xScale(d.hrCount))
.y((d: any) => yScale(d.resCount));
const path = g
.append("path")
.attr("fill", "none")
.attr("stroke", "#088dda")
.attr("stroke-width", "2px")
.attr("d", line(this.graphData));
// Transition
const totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength);
path
.transition()
.duration(4000)
.attr("stroke-dashoffset", 0);
// Data dots
g.selectAll("line-circle")
.data(this.graphData)
.enter()
.append("circle")
.attr("r", 4)
.attr("fill", "#088dda")
.attr("cx", (d: any) => xScale(d.hrCount))
.attr("cy", (d: any) => yScale(d.resCount));
}
解决方案
我检查了您的代码并提出了以下方法来解决您的问题。
您可以通过将 y 轴域映射到数据中存在的最大值 + 一些填充高度(我取 5),将顶部填充添加到图表中。这样做所需的更改:
maxAllowed = 0;
this.maxAllowed = d3.max(this.graphData, d => d.hrCount) + 5; // max value + padding
// y-scale
const yScale = d3
.scaleLinear()
.domain([0, this.maxAllowed])
.range([height, 0]);
对于要删除最外层刻度线的第二个更改,您可以使用轻松完成它.tickSizeOuter(0);
问题是您无法看到此更改,因为 tickSizeOuter 使那些没有相应 y-tick 值的刻度线的值为零(y 轴的终点有一些刻度 y 值)。
但是,如果您标记this.maxAllowed = 65
并删除的值,tickSizeOuter(0)
那么您将能够看到 y 轴的末端没有 y-tick 值但其刻度线向外延伸。在这些情况下,我们使用tickSizeOuter(0)
删除刻度线。
并且 IMO 你应该只使用它并且不应该删除 0 值的刻度线。它可能导致不必要的结果。但是,如果您仍然想删除 0 值的刻度线。您可以使用以下代码并将其从 svg 中删除:
d3.selectAll(".y-axes-tick .tick line").each(function(d, i) {
debugger;
if (i === 0) {
this.remove();
}
});
请在此处找到正在工作的 stackblitz
推荐阅读
- django-models - 日期过滤器不起作用,在日期之间进行过滤,从用户那里获取起始日期和截止日期
- android-viewpager - Androidx FragmentStatePagerAdapter - 无法为未附加到 FragmentManager 的 Fragment 设置MaxLifecycle
- python - 沿着numpy数组的一个轴随机保持一个不同于零的元素
- json - 尝试以 JSON 格式从 GitHub 按名称加载存储库列表
- javascript - JavaScript 函数。有人可以帮助或解释为什么它会记录 120 吗?根据我的分析,我看到 20
- javascript - Array.Push 仅返回最后一个推送的对象。如何解决?
- system.reactive - 使用 2nd SubscribeOn 时 Rx.net 行为发生变化(可能违反隐式反应式合同)
- javascript - 角度事件处理,使用模糊和单击相同方法的正确做法?
- sql-server - 如何在 SQL 中拆分两个具有相同子名称的 xml 标签
- vba - 将 jpg BLOB 从 Access 365 查询传递到 VBA 函数的问题