Question

我有一个javascript d3代码，我想使用JSON数据显示在时间轴上

      。轴路径，       .axis线{         填充：无；         中风：黑色；         形状渲染：crissEdges；       }
.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）; $ rows = array（）; $ table = array（）;

$ table ['cols'] = array（array（'id'=>'Screen'，'type'=>   'string'），array（'id'=>'电影'，'type'=>'string'），array（'id'   =>'开始时间'，'类型'=>'日期'），array（'id'=>'结束时间'，'类型'=>'日期'））;

while（$ res = mysqli_fetch_assoc（$ qresult））{$ result [] = $ res; }

foreach（$ result为$ 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（$ r ['StartTime']））。'，'。date（'s'，strtotime（$ r ['StartTime']））。'）'）;;   $ temp [] = array（'v'=>   'Date（0,0,0，'。date（'H'，strtotime（$ r ['EndTime']）））。'，'。date（'i'，strtotime（$ r ['EndTime']）））。'，'。date（'s'，strtotime（$ r ['EndTime']））。'）'）;;   $ rows [] = array（'c'=> $ temp）;

} $ table ['rows'] = $ rows; $ 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>
带有悬停，单击和滚动事件的堆叠时间线

如何在D3 JS中使用json？

带有悬停，单击和滚动事件的堆叠时间线

0 个答案: