Question

我是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>

这是我的预期图表。预期的甘特图

Answer 1

谢谢@Tushar帮我指出了这个例子。我能够完善图表。以下是经过精炼的代码。

var myWindow = window.open("", "MsgWindow", "width=200,height=100");

myWindow.document.write("<html><head><link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <style>body {font-family: 'Roboto', sans-serif;}</stye></head><p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p></html>")

如何绘制D3.js甘特图

1 个答案: