Изменение текста галочек на оси - PullRequest
Новая
       28

Изменение текста галочек на оси

0 голосов
/ 28 апреля 2018

Я создаю гистограмму и хочу изменить текст своих тиков. В наборе данных у меня в заголовке столбца было одно слово (например, еда), но я хотел бы отобразить его в виде текста «Еда, напитки и табак».

Я пытался сделать что-то подобное, но это не работает: 

var xAxis = d3.axisBottom(xScale)
.tickFormat(function(d) { if (text=== "food"){
   return "Food, drinks and tobacco"
     }; })

Я не смог установить этот заголовок в CSV, потому что если в имени столбца есть пробелы в середине, если его слова, D3 не может их прочитать.

1 Ответ

0 голосов
/ 29 апреля 2018

У вас есть две проблемы здесь. Во-первых, вы используете параметр d, а не text. Во-вторых, без else вы не вернете другие тики должным образом.

Итак, должно быть: 

if (d === "Food") {
  return "Food, drinks and tobacco"
} else {
  return d
};

Или даже проще, с троичным оператором: 

return d === "Food" ? "Food, drinks and tobacco" : d;

Вот базовая демонстрация (использование оси Y для лучшей читаемости): 

var svg = d3.select("svg");
var scale = d3.scalePoint()
  .range([20, 130])
  .domain(["Food", "Clothing", "Transportation", "Health"]);
var axis = d3.axisLeft(scale)
  .tickFormat(function(d) {
    return d === "Food" ? "Food, drinks and tobacco" : d;
  })
var gY = svg.append("g")
  .attr("transform", "translate(150,0)")
  .call(axis);
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

Относительно вашего последнего абзаца:

Я не смог установить этот заголовок в CSV, потому что если в имени столбца есть пробелы в середине, если его слова, D3 не может их прочитать.

Это не правильно, и это не имеет ничего общего с D3. Это проблема JavaScript: для имен свойств с пробелами просто используйте скобки: 

var someObject = {
  "a property name with spaces": 42
};

console.log(someObject["a property name with spaces"])
...