Как показать текст с внутренней диаграммой пончика (d3.js)? - PullRequest
Новая
       45

Как показать текст с внутренней диаграммой пончика (d3.js)?

0 голосов
/ 10 июня 2019

Я использую интерактивную функцию в кольцевой диаграмме, а также функцию кнопок для разметки кольцевой диаграммы в разные годы.Тем не менее, я стараюсь, чтобы текст, который является странами (ключом), а также ценой (значением), отображался на внутренней диаграмме пончиков, но, к сожалению, это не сработало!

Кроме того, я стараюсьвведите в скрипт какое-то слово, например, .text ('p'), но оно также не может отображать 'p' на внутренней диаграмме пончиков.Итак, кто-то может помочь в решении этой проблемы.Спасибо! 

//This is the html

<html>
    <head>
    <meta charset="utf-8">
    <title>Dount Chart</title>
</head>
<style type="text/css">
    .pie {
    margin: 20px;
    }

    .pie text {
    font-family: "Verdana";
    fill: #888;
    }

    .pie .name-text{
    font-size: 1.8em;
    }

    .pie .year-text{
    font-size: 1.5em;
    }

    .pie .price-text{
    font-size: 1.5em;
    }
</style>
<body>
    <button onclick="update(data2015)">Year 2015</button>
    <button onclick="update(data2016)">Year 2016</button>
    <button onclick="update(data2017)">Year 2017</button>
    <button onclick="update(data2018)">Year 2018</button>
    <div id="my_dataviz"></div>
    <div id="chart"></div>
    <svg width="960" height="700"></svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="dountchart.js"></script>
  </body>
</html>

<script>
//This is the script
//This is the partial data which is the same data type but different years in 2017 and 2017
var data2015 = {'Country A': 380, 'Country B': 280, 'Country C': 350, 
'Country E': 425, 'Country F': 495}

var data2016 = {'Country A': 390, 'Country B': 285, 'Country C': 370, 
'Country D': 570, 'Country E': 765, 'Country F': 625}


function update(data) {

// Compute the position of each group on the pie:
var pie = d3.pie()
.value(function(d) {return d.value; })
.sort(null); // This make sure that group order remains the same in the 
 pie chart

 var data_ready = pie(d3.entries(data))

//for (var key in data_ready) {
    //console.log(key);     
    //console.log(data2015[key]);
//}

// map to data
 var u = svg.selectAll("path")
  .data(data_ready)
  .on("mouseover", function(d) {
        d3.select(this)
        .style("cursor", "pointer")
        .style("opacity", 0.8)
        .append("u")
        .attr("class", "text-group");

          u.append("text")
            .attr("class", "name-text")
            .text(function(d) {return d.key; })
            .attr('text-anchor', 'middle')
            .attr('dy', '-1.2em');

          u.append("text")
            .attr("class", "price-text")
            .text(' AUD $' + `${d.value}` + ' Per Week')
            .attr('text-anchor', 'middle')
            .attr('dy', '2.0em');
        })
      .on("mouseout", function(d) {
      d3.select(this)
        .style("cursor", "none")  
        .style("fill", color(this._current))
        .select(".text-group").remove();
      })
.attr('d', arc)
.attr('fill', (d,i) => color(i))
.on("mouseover", function(d) {
  d3.select(this) 
    .style("cursor", "pointer")
    .transition()
    .duration(1000)
    .attr('d', arcOver)
    .style("opacity", 0.5);
})
.on("mouseout", function(d) {
  d3.select(this)
    .style("cursor", "none")
    .transition()
    .duration(3000)
    .attr("d", arc)
    .style("opacity", 1.5)
    .style("fill", color(this._current));
})
.each(function(d, i) { this._current = i; });

u.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '.35em')
.text(text);

  // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
u.enter()
.append("path")
.merge(u)
.transition()
.duration(1000)
.attr('d', arc)
.attr('fill', (d,i) => color(i))


 // remove the group that is not present anymore
u
  .exit()
  .remove()

}

 // Initialize the plot with the first dataset
 update(data2015)
</script>

На нем нет сообщений об ошибках, но также он не может отображать текст, который является d.key (страна) и d.value (цена) на внутренней диаграмме пончика.

...