Вопросы Теги

Как добавить текст в строке в D3?

Проще говоря, общий тип T должен быть сопоставим для сравнения. иначе вы не сможете сделать T.compareTo. В пункте 28 «Эффективная Java» предлагается: "always use Comparable<? super T> in preference to Comparable<T>. <T extends Comparable<? super T>>"

1
задан Manish 20 March 2019 в 04:34
поделиться

1 ответ

Просто нужно добавить текст, так как вы добавили строки.

Пример: 

svg.selectAll(null)
      .data(data)
      .enter()
      .append("text")
      .attr("x", d => (d.x1+d.x2)/2) //I am putting the text on the middle of x and y length of th eline. But you may change it as per your need.
      .attr("y", d => (d.y1+d.y2)/2)
      .attr("font-size", "10")
      .text((d)=>d.text)

Рабочий код ниже: 

const csv = `x1,y1,x2,y2,flag,text
    1,2,3,2,L,AA
    3,3,5,4,R,BB
    5,3,6,3,L,CC
    7,5,8,5,R,DD
    8,6,9,6,L,EE
    9,7,2,8,L,FF`;

    const data = d3.csvParse(csv, function(d) {
      d.x1 = +d.x1 * 20;
      d.y1 = +d.y1 * 15;
      d.x2 = +d.x2 * 20;
      d.y2 = +d.y2 * 15;
      
      return d;
    });

    data.forEach(function(d) {
      if ((d.flag === "L" && d.x1 < d.x2) || (d.flag === "R" && d.x1 > d.x2)) d.x1 = d.x2 + (d.x2 = d.x1, 0);
    });

    const svg = d3.select("svg");

    const marker = svg.append("defs")
      .append("marker")
      .attr("id", "marker")
      .attr("viewBox", "0 0 10 10")
      .attr("refX", "5")
      .attr("refY", "5")
      .attr("markerWidth", "6")
      .attr("markerHeight", "6")
      .attr("orient", "auto")
      .append("path")
      .attr("d", "M 0 0 L 10 5 L 0 10 z");

    const enterSelection = svg.selectAll(null)
      .data(data)
      .enter()
      .append("line")
      .attr("x1", d => d.x1)
      .attr("y1", d => d.y1)
      .attr("x2", d => d.x2)
      .attr("y2", d => d.y2)
      .attr("marker-end", "url(#marker)")
      .style("stroke-width", "1px")
      .style("stroke", "black");

svg.selectAll(null)
      .data(data)
      .enter()
      .append("text")
      .attr("x", d => (d.x1+d.x2)/2)
      .attr("y", d => (d.y1+d.y2)/2)
      .attr("font-size", "10")
      .text((d)=>d.text)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <svg></svg>

0
ответ дан Cyril Cherian 20 March 2019 в 04:34
поделиться
Другие вопросы по тегам:

Похожие вопросы: