0

Есть у меня d3.js диаграмма, она идеально выводится, вот только на оси абсцисс выводится только первый "x" (то есть N), а остальные странно нумеруются от '.002' до '.014'. Как бы сделать так, чтобы нормально выводились подписи данных на оси?

Вот код:

var w = 1000;
var h = 600;
var margin = 50;

JSONData = [
    {"x" : "N",     "y": "2"},
    {"x" : "M",     "y": "5"},
    {"x" : "L",     "y": "3"},
    {"x" : "K",     "y": "11"},
    {"x" : "J",     "y": "7"},
    {"x" : "I",     "y": "8"},
    {"x" : "D",     "y": "20"},
    {"x" : "H",     "y": "15"},
    {"x" : "G",     "y": "10"},
    {"x" : "F",     "y": "17"},
    {"x" : "E",     "y": "19"},
    {"x" : "B",     "y": "4"},
    {"x" : "A",     "y": "14"},
    {"x" : "R",     "y": "6"},
    {"x" : "V",     "y": "1"}
];

var data = JSONData.slice();

var dataX = function(d) { return d.x };
var dataY = function(d) { return d.y };

var svg = d3.select("body")
    .append("svg")
    .attr("class", "chart")
    .attr("width", w)
    .attr("height", h)
    .append("g");

var xScale = d3.time.scale()
    .domain([0, data.length])
    .range([0, w])

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, dataX)])
    .rangeRound([0, h]);

var rect = svg.append("g").attr("class", "bars");

rect.selectAll("rect")
    .data(data).enter()
    .append("rect")
        .attr("x", function(d, i) { return xScale(i); })
        .attr("y", function(d) { return (h - margin) - d.y * 20; })
        .attr("width", w / data.length - 2)
        .attr("height", function(d) { return d.y * 20; })
        .attr("fill", "#8BBBEA")
        .on("mouseover", function(){
            d3.select(this).attr("fill", "#699DD0");
        })
        .on("mouseout", function(){
            d3.select(this).attr("fill", "#8BBBEA");
        });

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickSize("1")
    .orient("bottom")
    .tickValues([1, 2]);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("bottom");

svg.append("g")
    .data(data)
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h-margin+2) + ")")
    .call(xAxis)
    .select("text")
        .style("text-anchor", "start")
        .attr("dx", (w / data.length) / 2)
        .attr("dy", "0")
        .attr("transform", "rotate(25)")
        .text(dataX);

var labels = svg.selectAll("text.x").data(data);
var xWidth = xScale(1) - xScale(0);

labels.enter()
    .append("text")
        .attr("class", "x normal")
        .attr("text-anchor", "middle")
        .attr("y", function(d){ return (h - margin) - d.y * 20 + 15; })
        .attr("x",  function(d, i) { return xScale(i) + xWidth / 2 })
        .text(dataY);

А вот изображение этого кода: введите сюда описание изображения

1 ответ 1

2

Вы почему-то для оси X используете веременную шкалу, вам надо использовать:

var xScale = d3.scale.ordinal()
    .domain([values])
    .range([0, w])

где [values] - это массив значений по x (['N', 'M', 'L', ...]).

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.