Изменить символ для графика - PullRequest
Новая
       22

Изменить символ для графика

2 голосов
/ 02 февраля 2020

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

svg.selectAll().
data(data).enter()
.append("circle")
.attr("class", "dot")
.attr("cx", function(d, i) { return timeScale(d.year); })
.attr("cy", function(d, i) { return yScale(d.sale) })
.style("fill", "#FFC300")
.attr("r", function(d) {return est_size(d.est)})

Если я изменю .append("circle") на .append("triangle"), диаграмма не показывает символ. Как я могу показать треугольник вместо круга?

1 Ответ

1 голос
/ 03 февраля 2020

SVG не имеет типа элемента для triangle - большинство базовых c форм - rect и circle (есть также пути, многоугольники, эллипсы и т. Д. c, но нет треугольника ). Однако у нас есть несколько открытых вариантов, мы можем использовать символ d3 (доступные символы перечислены здесь ), или мы можем создать свой собственный символ и использовать его.

Для использования d3-символом мы можем сделать следующее: 

var width = 500;
var height = 300;
var data = d3.range(10)
  .map(function(d) { return { x: Math.random()*width, y: Math.random()*height }; })
  
var svg = d3.select("svg")
  .attr("width",width)
  .attr("height",height);
  
svg.selectAll(".symbol")
  .data(data)
  .enter()
  .append("path")
  .attr("d", d3.symbol().type(d3.symbolTriangle).size(50))
  .attr("transform",function(d) { return "translate("+[d.x,d.y]+")" })
  .attr("class","symbol");

// For demonstrating that the triangles are centered:
svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 3)
  .attr("fill","orange")
  .attr("transform",function(d) { return "translate("+[d.x,d.y]+")" });  
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

symbol.size соответствует области формы, а не длине ребра

В качестве альтернативы, мы можем создать функцию, которая возвращает сам базовый c треугольник и использует его с selection.append(): 

var width = 500;
var height = 300;
var data = d3.range(10)
  .map(function(d) { return { x: Math.random()*width, y: Math.random()*height }; })
  
var svg = d3.select("svg")
  .attr("width",width)
  .attr("height",height);
  
var symbol = function() {
  // Hand drawn triangle:
  return d3.create('svg:path').attr("d","M0,8L-5,-3L5,-3Z").node()
}
    
  
svg.selectAll(".symbol")
  .data(data)
  .enter()
  .append(symbol) // append can accept a function.
  .attr("transform",function(d) { return "translate("+[d.x,d.y]+")" })
  .attr("class","symbol");

// For demonstrating that the triangles are centered:
svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("r", 3)
  .attr("fill","orange")
  .attr("transform",function(d) { return "translate("+[d.x,d.y]+")" });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

Мы могли бы также использовать несколько других подходов, таких как использование элементов svg symbol, но вышеупомянутых двух методов должно быть достаточно.

...