D3：y轴间隔未被刻度设置

发布于 2025-02-07 18:13:07 字数 1027 浏览 1 评论 0原文

我想在0-25-50-75-100的间隔内将Y轴设置为0-100％。

为此，我将tick设置为4。

但是我可以在的间隔内看到y

轴0-25-50-75-100 ??

我的代码以下 -

  const extent=[0,100];
  const yScale = scaleLinear().domain(extent).range([height, 0]);
  
  const x0Scale = scaleBand()
    .domain(data.map((d) => d.month))
    .range([0, width])
    .padding(0.46);
  const x1Scale = scaleBand()
   // .domain(data.map((d) => d.type))
    .rangeRound([0, x0Scale.bandwidth()])
    .padding(0.22);

  const xAix = axisBottom(x0Scale);
  const yAix = axisLeft(yScale);
  

  svg
  .select(".x-axis")
  .attr("transform", `translate(${xMargin}, ${height + yMargin})`)
  .style("font-weight", "bold")
  .style("font-size", "0.700rem")
  .call(xAix);
  
  svg
    .select(".y-axis")
    .attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)   
    .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
    .call(yAix.ticks(4).tickSize(-width).tickFormat(function(d){return d + "%"}));

原文

I want to set Y Axis by 0-100 percent in the intervals of 0-25-50-75-100.

For that I am setting ticks to 4.

But I can see Y axis in the intervals of 0-20-40-60-80-100

How can I set Y axis in the intervals of 0-25-50-75-100 ??

I have below code -

  const extent=[0,100];
  const yScale = scaleLinear().domain(extent).range([height, 0]);
  
  const x0Scale = scaleBand()
    .domain(data.map((d) => d.month))
    .range([0, width])
    .padding(0.46);
  const x1Scale = scaleBand()
   // .domain(data.map((d) => d.type))
    .rangeRound([0, x0Scale.bandwidth()])
    .padding(0.22);

  const xAix = axisBottom(x0Scale);
  const yAix = axisLeft(yScale);
  

  svg
  .select(".x-axis")
  .attr("transform", `translate(${xMargin}, ${height + yMargin})`)
  .style("font-weight", "bold")
  .style("font-size", "0.700rem")
  .call(xAix);
  
  svg
    .select(".y-axis")
    .attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)   
    .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
    .call(yAix.ticks(4).tickSize(-width).tickFormat(function(d){return d + "%"}));

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

高冷爸爸 2025-02-14 18:13:07

D3优先考虑某些tick函数，您可以通过tickvalues（d3.range（Minvalue，Maxvalue，Noofsteps）进行强制tick值）; 。在您的情况下，

yaix.ticksize（-width）.tickvalues（d3.range（0,100,4）.tickformat（function（d）{return d + d +“％”}）

或使用tickvalues（d3）。范围（d3.min（dataarray），d3.max（dataarray），noofticks））

回复收藏 0 原文

毁梦 2025-02-14 18:13:07

使用tickvalues而不是tick。

svg
  .select(".y-axis")
  .attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)   
  .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
  .call(yAix
    .ticksValues([0, 25, 50, 75, 100])
    .tickSize(-width)
    .tickFormat(function(d){return d + "%"}));

ticks仅用作提示-D3可能会显示一些或多或少的tick，具体取决于比例尺和可用的屏幕空间。

tickvalues允许您选择要显示tick的确切值。

Use tickValues instead of ticks.

svg
  .select(".y-axis")
  .attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)   
  .style("font-weight", "bold")
  .style("font-size", "0.725rem")      
  .call(yAix
    .ticksValues([0, 25, 50, 75, 100])
    .tickSize(-width)
    .tickFormat(function(d){return d + "%"}));

ticks is used as a hint only - d3 might display a few more or less ticks, depending on the scale and the available screen space.

tickValues allows you to select the exact values for which to display ticks.

回复收藏 0 原文

~没有更多了~