Как использовать JSON в D3 JS? - PullRequest
Новая
       43

Как использовать JSON в D3 JS?

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

У меня есть код JavaScript d3, и я хочу использовать данные JSON для отображения на временной шкале

.axis path, .axis line {fill: none;ход: черный;рендеринг формы: crispEdges;} 

.axis text {
  font-family: sans-serif;
  font-size: 10px;
}

.timeline-label {
  font-family: sans-serif;
  font-size: 12px;
}

#timeline2 .axis {
  transform: translate(0px,40px);
  -ms-transform: translate(0px,40px); /* IE 9 */
  -webkit-transform: translate(0px,40px); /* Safari and Chrome */
  -o-transform: translate(0px,40px); /* Opera */
  -moz-transform: translate(0px,40px); /* Firefox */
}

.coloredDiv {
  height:20px; width:20px; float:left;
}   </style>
<?php $connect=mysqli_connect("localhost","root","","agmsdb"); if (mysqli_connect_errno()) {   echo "Failed to connect to MySQL: " .

mysqli_connect_error ();}

$ query = "SELECT * FROM ProcessTime";$ qresult = mysqli_query ($ connect, $ query);$ row = array ();$ table = array ();

$ table ['cols'] = array (array ('id' => 'Screen', 'type' => 'string'), массив ('id' => 'Movie', 'type' => 'string'), массив ('id' => 'Время начала', 'type' => 'date'), массив ('id' => 'Время окончания', 'введите '=>' date '));

while ($ res = mysqli_fetch_assoc ($ qresult)) {$ result [] = $ res;}

foreach ($ result as $ r) {

$ temp = array ();$ temp [] = array ('v' => $ r ['planeID']);$ temp [] = array ('v' => $ r ['ProcessName']);$ temp [] = array ('v' => 'Date (0,0,0,'. date ('H', strtotime ($ r ['StartTime'])). ','. date ('i', StrToTime ($ г [ 'время_запуска'])) '' дата ( 's', StrToTime ($ г [ 'время_запуска'])) ')')...;$ temp [] = array ('v' => 'Date (0,0,0,'. date ('H', strtotime ($ r ['EndTime'])). ','. date ('i', StrToTime ($ г [ 'EndTime'])) '' дата ( 's', StrToTime ($ г [ 'EndTime'])) ')')...;$ row [] = array ('c' => $ temp);

} $ table ['lines'] = $ row;$ jsonTable = json_encode ($ table);echo $ jsonTable;?> window.onload = function () {

  var labelTestData = [
    {label: "step1", times: [{"starting_time": 0, "ending_time": 135}, {"starting_time": 160, "ending_time": 175}]},
    {label: "step2", times: [{"starting_time": 120, "ending_time": 160}, ]},
    {label: "step3", times: [{"starting_time": 160, "ending_time": 175}]}
  ];

  var width = 500;

  function timelineStackedHover() {
    var chart = d3.timelines()
      .relativeTime()
      .tickFormat({
        format: function(d) { return d3.timeFormat("%M")(d) },
        tickTime: d3.timeMinutes,
        tickInterval: 15,
        tickSize: 15,
      })
      .stack()
      .margin({left:70, right:30, top:0, bottom:0})
      .hover(function (d, i, datum) {
      // d is the current rendering object
      // i is the index during d3 rendering
      // datum is the id object
        var div = $('#hoverRes');
        var colors = chart.colors();
        div.find('.coloredDiv').css('background-color', colors(i))
        div.find('#name').text(datum.label);
      })
      .click(function (d, i, datum) {
        console.log("timeStackedHover", datum.label);
      });

    var svg = d3.select("#timeline3").append("svg").attr("width", width)
      .datum(labelTestData).call(chart);
  }
  timelineStackedHover();

}   </script> </head> <body>

Сложенная временная шкала с событиями зависания, нажатия и прокрутки

...