如何绘制D3.js甘特图
如何绘制D3.js甘特图
提问于 2018-12-18 22:39:37
我是D3js的新手，我正在尝试绘制甘特图。我有下面的代码，它给了我一个图表，但它看起来一点也不接近我预期的图表。如果有人能帮助我在下面的代码中犯错误，那将是非常有帮助的。这是我为甘特图编写的现有代码：
var data = [{
name: "A",
value: 1,
value2: 2
}, {
name: "B",
value: 4,
value2: 5
}, {
name: "C",
value: 7,
value2: 9
}, {
name: "D",
value: 2,
value2: 7
}, {
name: "E",
value: 1,
value2: 1
}, {
name: "F",
value: 5,
value2: 2
}]
var margin = {
top: 30,
right: 40,
bottom: 10,
left: 10
},
width = 520 - margin.left - margin.right,
height = 260 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width])
var y = d3.scaleBand()
.rangeRound([0, height])
.padding(.3)
var xAxis = d3.axisTop(x);
var svg = d3.select("#barchart").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 + ")");
x.domain([-10, 10])
y.domain(data.map(function (d) {
return d.name;
}));
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(Math.min(0, d.value));
})
.attr("y", function (d) {
return y(d.name);
})
.attr("width", function (d) {
return Math.abs(x(d.value) - x(0));
})
.attr("height", 13);
svg.selectAll(".bar2")
.data(data)
.enter().append("rect")
.attr("class", "bar2")
.attr("x", function (d) {
return x(Math.min(0, -d.value2));
})
.attr("y", function (d) {
return y(d.name);
})
.attr("width", function (d) {
return Math.abs(x(-d.value2) - x(0));
})
.attr("height", 13);
svg.append("g")
.attr("class", "x axis")
.attr('transform', 'translate(0,' + (height) + ')')
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("x1", x(0))
.attr("x2", x(0))
.attr("y2", height);
function type(d) {
d.value = +d.value;
return d;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="barchart"></div>
这是我预期的图表。期望的甘特图
回答 1
Stack Overflow用户
发布于 2018-12-19 12:31:48
感谢@Tushar给我指出了这个例子。我能够完善我的图表。下面是改进后的代码。
<script>
data = [{
name: "A",
value: 1,
value2: 2
}, {
name: "B",
value: 4,
value2: 5
}, {
name: "C",
value: 7,
value2: 9
}, {
name: "D",
value: 2,
value2: 7
}, {
name: "E",
value: 1,
value2: 1
}, {
name: "F",
value: 5,
value2: 2
}]
var margin = {
top: 35,
right: 20,
bottom: 20,
left: 30
},
width = 580 - margin.left - margin.right,
height = 260 - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width])
var y = d3.scaleBand()
.rangeRound([0, height])
.padding(.3)
var xAxis = d3.axisTop(x);
// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(40)
}
var svg = d3.select("#barchart").append("svg")
.attr("width", 585)
.attr("height", 270)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain([-10, 10])
y.domain(data.map(function (d) {
return d.name;
}));
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(Math.min(0, d.value));
})
.attr("y", function (d) {
return y(d.name);
})
.attr("width", function (d) {
return Math.abs(x(d.value) - x(0));
})
.attr("height", 13);
svg.selectAll(".bar2")
.data(data)
.enter().append("rect")
.attr("class", "bar2")
.attr("x", function (d) {
return x(Math.min(0, -d.value2));
})
.attr("y", function (d) {
return y(d.name);
})
.attr("width", function (d) {
return Math.abs(x(-d.value2) - x(0));
})
.attr("height", 13);
//svg.append("g")
// .attr("class", "x axis")
// .attr('transform', 'translate(0,' + (height) + ')')
// .call(xAxis);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the X gridlines
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
)
svg.append("g")
.call(d3.axisLeft(y));
//svg.append("g")
// .attr("class", "y axis")
// .append("line")
// .attr("x1", x(0))
// .attr("x2", x(0))
// .attr("y2", height);
function type(d) {
d.value = +d.value;
return d;
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53835397
复制相关文章
相似问题
腾讯云开发者
