D3js图未显示
我正在尝试使用从MySQL更新的数据制作图形，并使用d3js表示它。我正在使用的文件是：
app.js
'use strict';
var express = require('express');
var app = express();
var getRouter = require('./src/routes/getRoutes');
var port = process.env.PORT || 4000;
app.use(express.static('./src'));
app.set('views', './src/views');
app.set('view engine', 'ejs');
app.use('/get', getRouter.getget());
app.get('/', function (req, res) {
res.render('index', {
title: 'Thickness Graph'
});
});
app.listen(port, function () {
console.log('running server on port ' + port)
});
src / routes / getRoutes.js
express = require('express'),
getRouter = express.Router(),
mysql = require('mysql');
var connection = mysql.createConnection({
connectionLimit : 1,
host : 'localhost',
user : 'root',
password : 'pass',
database : 'thickness',
port: 3307
});
var getget = function(){
getRouter.route('/')
.get(function(req,res){
connection.query('select * from test1_shivam where Record=(select max(Record) from test1_shivam)', req.params.id, function(err, rows, fields) {
if (err) {
console.error(err);
res.statusCode = 500;
res.send({
result: 'error',
err: err.code
});
}
res.send(rows[0]);
});
});
return getRouter;
};
module.exports = {
getget: getget
};
src / views / index.ejs
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar-chart {
background-color: #C7D9D9;
}
</style>
<body>
<script src="//d3js/d3.v3.min.js"></script>
<script>
var url = 'http://localhost:4000/get'
d3.json(url, function(error, data) {
var dataset = Object.values(data)
var svgWidth = 1500, svgHeight = 400, barPadding = 5;
var barWidth = svgWidth / dataset.length
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) {
return svgHeight - d
})
.attr("height", function(d) {
return d;
})
.attr("width", barWidth - barPadding)
.attr("class", "bar")
.attr("transform", function (d, i) {
var translate = [barWidth * i, 0];
return "translate("+ translate +")";
});
var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("y", function(d, i) {
return svgHeight - d - 2;
})
.attr("x", function(d, i) {
return barWidth * i;
})
.attr("fill", "#A64C38");
})
</script>
</body>
我正在获取的对象类型中的数据是the data through /get I am receiving我要做的另一项任务是制作实时图形。相同的进一步建议将非常有帮助。
回答如下：您应该附加svg元素
var svg = d3.select("body").append("svg")
d3.select("svg")之前
D3js图未显示
我正在尝试使用从MySQL更新的数据制作图形，并使用d3js表示它。我正在使用的文件是：
app.js
'use strict';
var express = require('express');
var app = express();
var getRouter = require('./src/routes/getRoutes');
var port = process.env.PORT || 4000;
app.use(express.static('./src'));
app.set('views', './src/views');
app.set('view engine', 'ejs');
app.use('/get', getRouter.getget());
app.get('/', function (req, res) {
res.render('index', {
title: 'Thickness Graph'
});
});
app.listen(port, function () {
console.log('running server on port ' + port)
});
src / routes / getRoutes.js
express = require('express'),
getRouter = express.Router(),
mysql = require('mysql');
var connection = mysql.createConnection({
connectionLimit : 1,
host : 'localhost',
user : 'root',
password : 'pass',
database : 'thickness',
port: 3307
});
var getget = function(){
getRouter.route('/')
.get(function(req,res){
connection.query('select * from test1_shivam where Record=(select max(Record) from test1_shivam)', req.params.id, function(err, rows, fields) {
if (err) {
console.error(err);
res.statusCode = 500;
res.send({
result: 'error',
err: err.code
});
}
res.send(rows[0]);
});
});
return getRouter;
};
module.exports = {
getget: getget
};
src / views / index.ejs
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar-chart {
background-color: #C7D9D9;
}
</style>
<body>
<script src="//d3js/d3.v3.min.js"></script>
<script>
var url = 'http://localhost:4000/get'
d3.json(url, function(error, data) {
var dataset = Object.values(data)
var svgWidth = 1500, svgHeight = 400, barPadding = 5;
var barWidth = svgWidth / dataset.length
var svg = d3.select('svg')
.attr("width", svgWidth)
.attr("height", svgHeight);
var barChart = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) {
return svgHeight - d
})
.attr("height", function(d) {
return d;
})
.attr("width", barWidth - barPadding)
.attr("class", "bar")
.attr("transform", function (d, i) {
var translate = [barWidth * i, 0];
return "translate("+ translate +")";
});
var text = svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("y", function(d, i) {
return svgHeight - d - 2;
})
.attr("x", function(d, i) {
return barWidth * i;
})
.attr("fill", "#A64C38");
})
</script>
</body>
我正在获取的对象类型中的数据是the data through /get I am receiving我要做的另一项任务是制作实时图形。相同的进一步建议将非常有帮助。
回答如下：您应该附加svg元素
var svg = d3.select("body").append("svg")
d3.select("svg")之前