动态更改D3中的刻度数 [英] Dynamically changing the number of ticks in D3

问题描述

我尝试通过输入字段动态更改轴上的刻度数

// updated by an input field
var nNumberOfTicks;
function updatenumberofticks(nValue) { nNumberOfTicks = nValue; }

// definition of the axis
var xAxis = d3.svg.axis()
  .orient('bottom')
  .ticks(nNumberOfTicks)
  .scale(xScale);

但是它不起作用.参见此处: http://jsfiddle.net/stefanooo/cn2xo56w/3/.

当更改xmin时，此示例可以完美地工作.我必须更改什么才能使其也适用于滴答数?

解决方案

您需要在更改后将更新的滴答数提供给轴组件，例如

d3.select("#numberofticks").on("change", function() { updatenumberofticks(+this.value); vis.select('.xaxis').transition().call(xAxis.ticks(+this.value)); });

完整示例此处.

I try to dynamically change the number of ticks on an axis via an input field

// updated by an input field
var nNumberOfTicks;
function updatenumberofticks(nValue) { nNumberOfTicks = nValue; }

// definition of the axis
var xAxis = d3.svg.axis()
  .orient('bottom')
  .ticks(nNumberOfTicks)
  .scale(xScale);

but it doesn't work. See here: http://jsfiddle.net/stefanooo/cn2xo56w/3/.

This example works perfectly when changing xmin. What do I have to change to make it work for the number of ticks also?

解决方案

You need to give the updated number of ticks to the axis component after changing it, e.g.

d3.select("#numberofticks").on("change", function() { updatenumberofticks(+this.value); vis.select('.xaxis').transition().call(xAxis.ticks(+this.value)); });

Complete example here.

这篇关于动态更改D3中的刻度数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！