[英]Find location of y-axis ticks using d3.js
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
我正在使用 d3.js（在 PowerBI 中 - 因此是 d3 的第 3 版）构建一个 SVG 可视化，并且我正在努力将我的数据点和固定线与适当的 y 轴刻度标记对齐。
比如8个轴点，线条几乎是对的，只是稍微偏上一点
但是当只有 1 或 2 点时，它就差了
我正在尝试动态计算偏移量，因为 y 轴刻度数将取决于我拥有的 PowerBI 过滤器。
我目前的计算是，我将 svg 的高度除以滴答数，然后将其除以二，使其落在中心。 y 轴是有序的。
相关代码是：
var margin = {top: 20, right: 250, bottom: 50, left: 50},
width = pbi.width - margin.left - margin.right,
height = pbi.height - margin.top - margin.bottom,
legendleft = pbi.width - margin.right;
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], barPad, barOuterPad);
var svg = d3.select("#chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom + legendleft)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
y.domain(Data.map(function(d) { return d.reportingyear; }));
var YearSize = new Set(yearArray).size // Gets the number of ticks on the y-axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0, 6)")
.call(d3.svg.axis().scale(y).orient("left"));
// Chart the rows
var publishedRow = svg.append("g").attr("id", "publishedgroup").selectAll(null)
.data(rowArray)
.enter();
publishedRow.append("line")
.style("stroke", "grey")
.style("stroke-width", 1)
.style("stroke-dasharray", ("2, 2"))
.attr("x1", function(d) { return 0; })
.attr("y1", function(d) { return y(d.entry)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); })
.attr("x2", function(d) { return width; })
.attr("y2", function(d) { return y(d.entry)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); });
publishedRow.append("circle")
.attr("cx", function(d) {return x(new Date(d.date))} )
.attr("cy", function(d) {return y(d.year)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); })
.attr("r", 7)
.style("fill", function(d, i) { return milestoneMap[d.milestone]; })
});
.attr行具有动态计算偏移量的代码。
有没有更简单的方法来做到这一点？ 或者我可以得到一些关于为什么我的计算不起作用的建议吗？
谢谢！
我应该使用.rangePoints而不是.rangeRoundBands
然后 static 偏移量 6 起作用了。
问题解决了
D3.js多个y轴具有相同的刻度位置？
[英]D3.js multiple y-Axis with same position of ticks?
我有3个y轴和一个x轴的图表，必须放大所有3轴。 ！ DEMO 是否可以设置所有3 y轴，中心为0？ 如果我缩放图表滴答必须保持在同一个地方？ 或者，也许，说“在0值之间始终只显示10个滴答”。 例如： 范围1 - > [10..0 ..- 10] ...
在d3.js多y轴图中重新调整轴刻度和文本
[英]Rescale axis ticks and text in d3.js multi y-axis plot
我有一个基于此代码的平行坐标图： http : //bl.ocks.org/syntagmatic/2409451 我正在尝试获取y轴上的刻度线和数字，以从数据的最小值到最大值进行缩放，而不是像目前所做的那样自动缩放为方便的线性数字。 我无法找到使用d3或js的任何示例，其中任何类型 ...
使用d3.js在Y轴上显示字符串值
[英]Displaying String values on Y-axis using d3.js
我是D3.js的新手，但遇到了一个问题。 我尝试使用一些示例数据创建栏。 能够显示Strings（例如：X轴上显示“ Bangalore”，Y轴上显示值，但我需要在Y轴上显示Strings和在X轴上显示值。 当我尝试使用上述代码时，代码条会以“水平”的形式出现，但需要以“ ...
d3.Js-如何将自定义（“字符串”）值设置为“ y轴”-刻度
[英]d3.Js - How to set custom(“string”) values to `y-Axis` - ticks
在我的条形图中，我将y轴的左值设置为string格式，如何将这些值设置为xAxis刻度？ 这是我的代码：有关详细信息，请参见注释 提前致谢。 ...
更改y轴上刻度的大小并在D3.js中添加图例
[英]Changing size of ticks on y axis and adding legend in D3.js
我是D3新手，我想根据传入的数据绘制多个图。 在这里，我尝试绘制其中之一，并将在同一页面上再添加4个类似的内容。 以下是我到目前为止的代码： 我对代码的格式几乎没有疑问： 当我尝试以下链接时如何在代码中添加图例，但在使用调用函数http://bl.ocks.org/ZJON ...
冻结d3.js中的Y轴标签
[英]Freeze Y-Axis label in d3.js
我试图在滚动时冻结Y轴标签。 我试图把 position:fixed; 沿Y轴样式显示，但似乎不起作用。 有人遇到过这种情况吗？ ...
D3.JS Y轴标签问题
[英]D3.JS Y-axis label issue
首先，我是D3.Js的新手。 过去一周左右，我一直在研究D3.JS问题，尤其是制作带有Y轴标签的图形。 但是，我无法获得所需的图形。 快到了，但是倒挂了，或者我的数据出了错。 现在，在显示所有代码之前，我将简要展示一些代码和主要问题的图像。 我花了很多时间看其他有类似问题的Stack ...
在D3.js中反转热图上的y轴
[英]Inverting the y-axis on a heatmap in D3.js
查看在D3.js中完成的热图的jsFiddle 。 默认情况下，y轴自上而下。 如本次对话所述，我必须先折线图上的y轴。 但是，我不太确定如何在此处进行所需的反转。 有任何想法吗？ 我的代码的相关部分（需要应用反转的部分）如下： ...
D3.js y轴时间刻度
[英]D3.js y-Axis time scale
D3.js中是否可以有一个带有时间刻度y轴的折线图？ 我找到了文档： https : //github.com/mbostock/d3/wiki/Time-Scales 而且Y轴似乎没有限制。 你有什么例子吗？ ...
如何在d3.js中设置y轴的最小步长？
[英]How to set minimal step for y-axis in d3.js?
我有一个条形图，其中值的范围可以从0到5。这些值只能是整数（0、1、2、3、4、5）。 但是，y轴的绘制步长较小，例如0、0.5、1、1.5、2等。我想将轴值仅设置为整数，但是使用domain和range根本没有帮助。 我看不到用于设置诸如minimalInterval = 1类的选 ...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.