Я новичок в D3.js. Мне нужно нарисовать график с осью, как показано ниже. Любая рабочая скрипка мне очень поможет.Ось D3 без использования метода d3.svg.axis()
Я проверил приведенную ниже скрипку, но не уверен, как настроить ее в соответствии с моим требованием.
Вы можете создать масштаб (который полностью не зависит от оси) и использовать его параметры для создания элементов svg для вашей оси; в вашем случае горизонтальная линия и круг + текст как тики. В частности, вы можете использовать шкалу range() для получения горизонтальной длины линии; и шкала ticks(n) функции для получения n равномерно расположенных точек в области шкалы. Пропуская эти точки на шкалу, вы получаете координату x, которая будет использоваться для ваших тиков.
xScale = d3.scale.linear().domain([0.0, 1.0]).range([0, width]);
var axis = svg.append('g').attr('class', 'xaxis');
axis.append('line').attr({
'x1': xScale.range()[0],
'y1': height,
'x2': xScale.range()[1],
'y2': height
});
ticks = axis.selectAll('.ticks')
.data(xScale.ticks(10))
.enter()
.append('g')
.attr('class', 'tick');
ticks.append('circle')
.attr({
'cx': function(d) { return xScale(d); },
'cy': height,
'r': 5
});
ticks.append('text')
.attr({
'x': function(d) { return xScale(d); },
'y': height,
'dy': 20 // Move the text a little under the line
})
.text(function(d) { return d; });
Вот минимальное время работы JSFiddle: http://jsfiddle.net/LeartS/yGesr/
Там нет изображения или ссылку на скрипке в вашем посте. –
добавил справку image.plz. – santosh
Вы можете использовать метод 'ticks (number) 'шкалы для получения позиций тика, а затем использовать масштаб, чтобы расположить их и нарисовать круги и метки. Если вам нужна более конкретная помощь, вам нужно будет опубликовать код того, что вы пробовали, и объяснить, почему он не работает для вас. – AmeliaBR