D3: ошибка при отображении линейного графика во всплывающей подсказке

Question

D3: ошибка при отображении линейного графика во всплывающей подсказке

Проверьте консоль. В нем говорится об ошибке java.lang.SecurityException. Измените свое имя пакета. Я изменил имя пакета с «java.assessment» на «assesment», и это сработало для меня. Если кто-то знает основную причину, сообщите мне.

0

javascript d3.js

задан Om Prakash Sao 20 February 2019 в 21:08

1 ответ

Другие вопросы по тегам:

javascript d3.js

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

score 0 · Answer 1

Я решил проблему. Проблема возникла из-за смешения API из d3.v3 и d3.v4. Я перенес весь мой код в реализацию d3.v3. Размещаем этот код здесь, так что если кто-то захочет увидеть реализацию диаграммы во всплывающей подсказке другой диаграммы.

Вот полный код:

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Question 5 </title>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
  <style>
    body {
      font-family: "Arial", sans-serif;
    }
    
    .bar {
      fill: gray;
      /*#5f89ad;*/
    }
    
    rect:hover {
      fill: #1E90FF;
    }
    
    .axis {
      font-size: 13px;
    }
    
    .axis path,
    .axis line {
      fill: none;
      /*display: none;*/
    }
    
    .label {
      font-size: 13px;
      font-weight: bold;
    }
    
    text {
      font-weight: bold;
    }
    
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    /*.d3-tip {
  line-height: 1;
  padding: 6px;
  background: wheat;
  border-radius: 4px solid black;
  font-size: 12px;
}*/
  </style>

</head>

<body>

  <div id="graphic"></div>

  <script>
    var data = [{
        country: 'Bangladesh',
        population_2012: 105905297,
        growth: {
          year_2013: 42488,
          year_2014: 934,
          year_2015: 52633,
          year_2016: 112822,
          year_2017: 160792
        }
      },
      {
        country: 'Ethopia',
        population_2012: 75656319,
        growth: {
          year_2013: 1606010,
          year_2014: 1606705,
          year_2015: 1600666,
          year_2016: 1590077,
          year_2017: 1580805
        }
      },
      {
        country: 'Kenya',
        population_2012: 33007327,
        growth: {
          year_2013: 705153,
          year_2014: 703994,
          year_2015: 699906,
          year_2016: 694295,
          year_2017: 687910
        }
      },
      {
        country: 'Afghanistan',
        population_2012: 23280573,
        growth: {
          year_2013: 717151,
          year_2014: 706082,
          year_2015: 665025,
          year_2016: 616262,
          year_2017: 573643
        }
      },
      {
        country: 'Morocco',
        population_2012: 13619520,
        growth: {
          year_2013: 11862,
          year_2014: 7997,
          year_2015: 391,
          year_2016: -8820,
          year_2017: -17029
        }
      }
    ];

    data_growth = [];

    for (i = 0; i < data.length; i++) {
      data[i]["total_population"] = data[i]["population_2012"] + data[i].growth["year_2013"] + data[i].growth["year_2014"] + data[i].growth["year_2015"] + data[i].growth["year_2016"] + data[i].growth["year_2017"];

      data[i]["growth_data"] = [{
          "year": 2013,
          "growth": (data[i].growth["year_2013"] / (data[i]["population_2012"])) * 100
        },
        {
          "year": 2014,
          "growth": (data[i].growth["year_2014"] / (data[i]["population_2012"] + data[i].growth["year_2013"])) * 100
        },
        {
          "year": 2015,
          "growth": (data[i].growth["year_2015"] / (data[i]["population_2012"] + data[i].growth["year_2013"] + data[i].growth["year_2014"])) * 100
        },
        {
          "year": 2016,
          "growth": (data[i].growth["year_2016"] / (data[i]["population_2012"] + data[i].growth["year_2013"] + data[i].growth["year_2014"] + data[i].growth["year_2015"])) * 100
        },
        {
          "year": 2017,
          "growth": (data[i].growth["year_2017"] / (data[i]["population_2012"] + data[i].growth["year_2013"] + data[i].growth["year_2014"] + data[i].growth["year_2015"] + data[i].growth["year_2016"])) * 100
        }
      ];
    }

    //console.log(data);

    //sort bars based on population_2012
    data = data.sort(function(a, b) {
      return d3.ascending(a.population_2012, b.population_2012);
    })

    //set up svg using margin conventions - we'll need plenty of room on the left for labels
    var margin = {
      top: 15,
      right: 25,
      bottom: 15,
      left: 160
    };

    var width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var svg = d3.select("#graphic").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var tool_tip = d3.tip()
      .attr("class", "d3-tip")
      .offset([20, 670])
      .html("<p>Year-wise growth in population for the country:</p><div id='tipDiv' style='border: 1px solid gray;'></div>");

    svg.call(tool_tip);

    var x = d3.scale.linear()
      .range([0, width])
      .domain([0, d3.max(data, function(d) {
        return d.population_2012;
      })]);

    var y = d3.scale.ordinal()
      .rangeRoundBands([height, 0], .1)
      .domain(data.map(function(d) {
        return d.country;
      }));

    //make y axis to show bar countrys
    var yAxis = d3.svg.axis()
      .scale(y)
      //no tick marks
      .tickSize(0)
      .orient("left");

    var gy = svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)

    var bars = svg.selectAll(".bar")
      .data(data)
      .enter()
      .append("g")

    //append rects
    bars.append("rect")
      .attr("class", "bar")
      .attr("y", function(d) {
        return y(d.country);
      })
      .attr("height", y.rangeBand())
      .attr("x", 0)
      .attr("width", function(d) {
        return x(d.total_population);
      })
      .attr('fill', 'gray')
      .on('mouseover', function(d) {

        //console.log("d:==>", d);
        tool_tip.show();
        var points_raw = d3.range(10).map(function() {
          return {
            year: Math.random() * 100,
            growth: Math.random() * 100
          }
        });
        //console.log("points-raw:==>", points_raw)
        // sort by x, descending
        //points = points_raw.sort(function(a, b) { return d3.descending(a.year, b.year); });
        //points = points_raw
        points = d["growth_data"];

        // set up canvas
        var margin = {
            top: 20,
            right: 30,
            bottom: 40,
            left: 60
          },
          width = 420 - margin.left - margin.right,
          height = 320 - margin.top - margin.bottom;

        var x = d3.scale.linear()
          .range([0, width])
          .domain(points.map(function(d) {
            return d.year;
          }));;

        var y = d3.scale.linear()
          .range([height, 0])
          .domain([0, d3.max(points, function(d) {
            return d.growth;
          })]);

        var x_axis = d3.svg.axis()
          .scale(x)
          .ticks(5)
          .orient('bottom');

        var y_axis = d3.svg.axis()
          .scale(y)
          .orient('left');

        // define line function
        var line = d3.svg.line()
          .x(function(d) {
            return x(d.year);
          })
          .y(function(d) {
            return y(d.growth);
          })
        /*.interpolate('basis')*/
        ;

        /*points.forEach(function(d) {
    d.growth = +d.growth;
  });*/

        // add svg element
        var svg = d3.select('#tipDiv')
          .append('svg')
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // determine domain ranges for x/y
        x.domain(d3.extent(points, function(d) {
          return d.year;
        }));
        /*x.domain(points.map(function (d) {
                return d["year"];
            }));
	*/
        y.domain(d3.extent(points, function(d) {
          return d.growth;
        }));

        // add labeled x-axis
        svg.append('g')
          .attr('class', 'x axis')
          .attr("transform", "translate(0," + height + ")")
          .call(x_axis)
          .append("text")
          .attr("x", width - 6)
          .attr("dy", "3em")
          /*.style("text-anchor", "end")*/
          .text("Year");

        // add labeled y-axis
        svg.append('g')
          .attr('class', 'y axis')
          .call(y_axis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 0)
          .attr("dy", "-3.71em")
          .style("text-anchor", "end")
          .text("Pct %");

        // draw line
        svg.append('path')
          .datum(points)
          .attr('class', 'line')
          .attr('d', line);

      })
      .on('mouseout', tool_tip.hide);

    //add a population_2012 label to the right of each bar
    bars.append("text")
      .attr("class", "label")
      //y position of the label is halfway down the bar
      .attr("y", function(d) {
        return y(d.country) + y.rangeBand() / 2 + 4;
      })
      //x position is 3 pixels to the right of the bar
      .attr("x", 15
        /*(function (d) {
                        return x(d.population_2012) + 3;
                    }*/
      )
      .text(function(d) {
        return d.total_population.toLocaleString();
      });
  </script>

</body>

</html>