Fatal编程技术网
  • javascript/
  • Javascript 如何从mysql中检索D3.Js中的动态数据进行实时绘图？

Javascript 如何从mysql中检索D3.Js中的动态数据进行实时绘图？

javascript php mysql json d3.js

Javascript 如何从mysql中检索D3.Js中的动态数据进行实时绘图？,javascript,php,mysql,json,d3.js,Javascript,Php,Mysql,Json,D3.js,我正在尝试使用D3.js绘制实时数据。对于我遵循的条形图。这是我想要的真实情节，但不是通过“fakeData.json”文件，而是为了这个，我想从mysql检索动态数据。为了这个目的，我跟随。现在，我的问题：它可以很好地解决这个问题 d3.json("data.json", function (err, data){.... 但是当我将data.json替换为 d3.json("index.php", function (err, data){.... 我在输出中没有得到任何东西。我的问题看

我正在尝试使用D3.js绘制实时数据。对于我遵循的条形图。这是我想要的真实情节，但不是通过“fakeData.json”文件，而是为了这个，我想从mysql检索动态数据。为了这个目的，我跟随。现在，我的问题：它可以很好地解决这个问题

d3.json("data.json", function (err, data){....
但是当我将data.json替换为

d3.json("index.php", function (err, data){....
我在输出中没有得到任何东西。我的问题看起来很相似，但找不到所需的结果。我的php代码（index.php）如下所示 ` 而且，当复制并粘贴到data.json文件时，它的输出工作正常。我的data.json文件看起来

[
{"name":"John", "value":21088},
{"name":"Kathford", "value":297},
{"name":"King", "value":2095},
{"name":"Tylor", "value":64},
{"name":"Edward", "value":35},
{"name":"Saddey", "value":23},
{"name":"Sandy", "value":29},
{"name":" Rita ", "value":28},
{"name":"Stanley", "value":25},
{"name":"Hiung", "value":21},
{"name":"Chang", "value":19},
{"name":"Bokki", "value":30},
{"name":"Amzod", "value":15},
{"name":"Allure", "value":2000},
{"name":"Jim", "value":4011}
    ]
最后，整个绘图代码是

final.html


实时绘图
最高评级机构
数据来自
//更新Barchart.js
var设置=功能（targetID）{
//设置svg元素和图表的大小
var margin={top:0，right:0，bottom:0，left:0}，
宽度=600-边距。左侧-边距。右侧，
高度=400-margin.top-margin.bottom，
类别凹痕=4*15+5，
defaultBarWidth=2000；
//设置天平
var x=d3.scale.linear（）
.domain（[0，defaultBarWidth]）
.范围（[0，宽度]）；
变量y=d3.scale.ordinal（）
.rangeRoundBands（[0，高度]，0.1，0）；
//创建SVG元素
d3.select（targetID）.selectAll（“svg”）.remove（）
var svg=d3.select（targetID）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//打包和导出设置
变量设置={
边距：边距，宽度：宽度，高度：高度，类别凹痕：类别凹痕，
svg:svg，x:x，y:y
}
返回设置；
}
var redrawChart=函数（targetID，newdata）{
//导入设置
var margin=settings.margin，width=settings.width，height=settings.height，categoryIndent=settings.categoryIndent，
svg=settings.svg，x=settings.x，y=settings.y；
//重置域
y、 域（newdata.sort）（函数（a，b）{
返回b.value-a.value；
})
.map（函数（d）{返回d.Name；}））；
var barmax=d3.max（新数据，函数（e）{
返回e.value；
});
x、 域（[0，barmax]）；
/////////
//进入//
/////////
//将新数据绑定到图表行
//创建图表行并移动到图表底部下方
var chartRow=svg.selectAll（“g.chartRow”）
.data（newdata，函数（d）{返回d.Name}）；
var newRow=chartRow
.输入（）
.附加（“g”）
.attr（“类”、“图表行”）
.attr（“变换”、“平移（0）”+高度+边距.top+边距.bottom+”）；
//添加矩形
newRow.insert（“rect”）
.attr（“类”、“条”）
.attr（“x”，0）
.attr（“不透明度”，0）
.attr（“高度”，y.rangeBand（））
.attr（“宽度”，函数（d）{返回x（d.value）；}）
//添加值标签
newRow.append（“文本”）
.attr（“类别”、“标签”）
.attr（“y”，y.rangeBand（）/2）
.attr（“x”，0）
.attr（“不透明度”，0）
.attr（“dy”，“.35em”）
.attr（“dx”，“0.5em”）
.text（函数（d）{返回d.value；}）；
//添加标题
newRow.append（“文本”）
.attr（“类别”、“类别”）
.attr（“文本溢出”、“省略号”）
.attr（“y”，y.rangeBand（）/2）
.attr（“x”，类别凹痕）
.attr（“不透明度”，0）
.attr（“dy”，“.35em”）
.attr（“dx”，“0.5em”）
.text（函数（d）{返回d.Name}）；
//////////
//更新//
//////////
//更新条宽度
chartRow.select（“.bar”）.transition（）
.持续时间（300）
.attr（“宽度”，函数（d）{返回x（d.value）；}）
.attr（“不透明度”，1）；
//更新数据标签
chartRow.select（“.label”）.transition（）
.持续时间（300）
.attr（“不透明度”，1）
.tween（“文本”，职能（d）{
变量i=d3.interpolate（+this.textContent.replace（/\，/g'，），+d.value）；
返回函数（t）{
this.textContent=Math.round（i（t））；
};
});
//淡入类别
chartRow.select（“.category”）.transition（）
.持续时间（300）
.attr（“不透明度”，1）；
////////
//出口//
////////
//淡出并移除退出元素
chartRow.exit（）.transition（）
.style（“不透明度”、“0”）
.attr（“变换”、“平移（0）”+（高度+边距.顶部+边距.底部）+”）
.remove（）；
////////////////
//重新排列行//
////////////////
变量延迟=函数（d，i）{return 200+i*30；}；
chartRow.transition（）
.延迟（延迟）
.持续时间（900）
.attr（“transform”，函数（d）{return“translate（0），+y（d.Name）+”）；}；
};
//提取数据
//因为我们的数据是假的，所以添加一些随机更改来模拟数据流。
//使用回调，因为d3.json加载是异步的
var pullData=函数（设置、回调）{
json（“index.php”，函数（err，data）{
如果（错误）返回控制台。警告（错误）；
var newData=数据；
data.forEach（函数（d，i）{
var newValue=d.value
newData[i].value=newValue

[
{"name":"John", "value":21088},
{"name":"Kathford", "value":297},
{"name":"King", "value":2095},
{"name":"Tylor", "value":64},
{"name":"Edward", "value":35},
{"name":"Saddey", "value":23},
{"name":"Sandy", "value":29},
{"name":" Rita ", "value":28},
{"name":"Stanley", "value":25},
{"name":"Hiung", "value":21},
{"name":"Chang", "value":19},
{"name":"Bokki", "value":30},
{"name":"Amzod", "value":15},
{"name":"Allure", "value":2000},
{"name":"Jim", "value":4011}
    ]



    <!DOCTYPE html>

<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="style1.css">
</head>

<body>

    <div id="everything">
        <h1>Real time plot</h1>
        <h2>Top Rating Standing</h2>    
        <div id="chart"></div>
        <h2>Data from<a href="#"> International Journal</a></h2>
    </div>


    <script>

//updatingBarChart.js

var setup = function(targetID){
    //Set size of svg element and chart
    var margin = {top: 0, right: 0, bottom: 0, left: 0},
        width = 600 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom,
        categoryIndent = 4*15 + 5,
        defaultBarWidth = 2000;

    //Set up scales
    var x = d3.scale.linear()
      .domain([0,defaultBarWidth])
      .range([0,width]);
    var y = d3.scale.ordinal()
      .rangeRoundBands([0, height], 0.1, 0);

    //Create SVG element
    d3.select(targetID).selectAll("svg").remove()
    var svg = d3.select(targetID).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 + ")");

    //Package and export settings
    var settings = {
      margin:margin, width:width, height:height, categoryIndent:categoryIndent,
      svg:svg, x:x, y:y
    }
    return settings;
}

var redrawChart = function(targetID, newdata) {

    //Import settings
    var margin=settings.margin, width=settings.width, height=settings.height, categoryIndent=settings.categoryIndent, 
    svg=settings.svg, x=settings.x, y=settings.y;

    //Reset domains
    y.domain(newdata.sort(function(a,b){
      return b.value - a.value;
    })
      .map(function(d) { return d.Name; }));
    var barmax = d3.max(newdata, function(e) {
      return e.value;
    });
    x.domain([0,barmax]);

    /////////
    //ENTER//
    /////////

    //Bind new data to chart rows 

    //Create chart row and move to below the bottom of the chart
    var chartRow = svg.selectAll("g.chartRow")
      .data(newdata, function(d){ return d.Name});
    var newRow = chartRow
      .enter()
      .append("g")
      .attr("class", "chartRow")
      .attr("transform", "translate(0," + height + margin.top + margin.bottom + ")");

    //Add rectangles
    newRow.insert("rect")
      .attr("class","bar")
      .attr("x", 0)
      .attr("opacity",0)
      .attr("height", y.rangeBand())
      .attr("width", function(d) { return x(d.value);}) 

    //Add value labels
    newRow.append("text")
      .attr("class","label")
      .attr("y", y.rangeBand()/2)
      .attr("x",0)
      .attr("opacity",0)
      .attr("dy",".35em")
      .attr("dx","0.5em")
      .text(function(d){return d.value;}); 

    //Add Headlines
    newRow.append("text")
      .attr("class","category")
      .attr("text-overflow","ellipsis")
      .attr("y", y.rangeBand()/2)
      .attr("x",categoryIndent)
      .attr("opacity",0)
      .attr("dy",".35em")
      .attr("dx","0.5em")
      .text(function(d){return d.Name});


    //////////
    //UPDATE//
    //////////

    //Update bar widths
    chartRow.select(".bar").transition()
      .duration(300)
      .attr("width", function(d) { return x(d.value);})
      .attr("opacity",1);

    //Update data labels
    chartRow.select(".label").transition()
      .duration(300)
      .attr("opacity",1)
      .tween("text", function(d) { 
        var i = d3.interpolate(+this.textContent.replace(/\,/g,''), +d.value);
        return function(t) {
          this.textContent = Math.round(i(t));
        };
      });

    //Fade in categories
    chartRow.select(".category").transition()
      .duration(300)
      .attr("opacity",1);


    ////////
    //EXIT//
    ////////

    //Fade out and remove exit elements
    chartRow.exit().transition()
      .style("opacity","0")
      .attr("transform", "translate(0," + (height + margin.top + margin.bottom) + ")")
      .remove();


    ////////////////
    //REORDER ROWS//
    ////////////////

    var delay = function(d, i) { return 200 + i * 30; };

    chartRow.transition()
        .delay(delay)
        .duration(900)
        .attr("transform", function(d){ return "translate(0," + y(d.Name) + ")"; });
};



//Pulls data
//Since our data is fake, adds some random changes to simulate a data stream.
//Uses a callback because d3.json loading is asynchronous
var pullData = function(settings,callback){
    d3.json("index.php", function (err, data){
        if (err) return console.warn(err);

        var newData = data;
        data.forEach(function(d,i){
            var newValue = d.value 
            newData[i].value = newValue <= 0 ? 10 : newValue
        })

        newData = formatData(newData);

        callback(settings,newData);
    })
}

//Sort data in descending order and take the top 10 values
var formatData = function(data){
    return data.sort(function (a, b) {
        return b.value - a.value;
      })
      .slice(0, 5);
}

//I like to call it what it does
var redraw = function(settings){
    pullData(settings,redrawChart)
}

//setup (includes first draw)
var settings = setup('#chart');
redraw(settings)

//Repeat every 3 seconds
setInterval(function(){
    redraw(settings)
}, 3000);

    </script>
</body>