繁体   English   中英

使用 d3.js 查找 y 轴刻度的位置

[英]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多个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轴上显示值。 当我尝试使用上述代码时,代码条会以“水平”的形式出现,但需要以“ ...

更改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.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM