Подтвердить что ты не робот

D3.js Укажите текст для оси x

В моей оси x в настоящее время есть пронумерованные тики. Я хочу, чтобы тики были заменены данными моего объекта (в частности, значения ключевого слова). Как бы это сделать?

У меня есть рабочий Fiddle

var dataset = [
            {"keyword": "payday loans", "global": 1400000, "local": 673000, "cpc": "14.11"},
            {"keyword": "title loans", "global": 165000, "local": 160000, "cpc": "12.53" },
            {"keyword": "personal loans", "global": 550000, "local": 301000, "cpc": "6.14"},
            {"keyword": "online personal loans", "global": 15400, "local": 12900, "cpc": "5.84"},
            {"keyword": "online title loans", "global": 111600, "local": 11500, "cpc": "11.74"}
        ];

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
// xAxis
svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h) + ")")
    .call(xAxis);
//xAxis Label
svg.append("text") 
    .attr("transform", "translate(" + (w / 2) + " ," + (h + margin.bottom - 5) +")")
    .style("text-anchor", "middle")
    .text("Keyword");
4b9b3361

ОТВЕТЫ

Ответ 1

Самый простой способ добиться этого - установить функцию tickFormat для вашей оси:

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickFormat(function(d) { return dataset[d].keyword; })
    .orient("bottom");

Возможно, вам придется немного подстроить ширину, чтобы она соответствовала меткам (или повернуть их).

"Правильный" способ сделать это - указать значения домена для вас xScale как ключевые слова вместо индексов массива. Тогда вам придется изменить все остальные коды, которые также используют xScale.