score:1

Accepted answer

The main problem here is that you are accessing your data incorrectly. Your data is an array with one element. That one element contains an object with name, code, and children. So when you just pass the whole object to valueline() it's not going to work because valueline is then going to look for values that don't exist.

Also it looks like you are trying to access a date attribute that doesn't exist with d.name = +d.date

The data you really want to plot is in data[0].children. I've set the x-axis domain from the data, but if you want to control the order of an ordinal scale, it's often better to explicitly set the domain with something like x.domain(['SEASONAL_CYQ3', 'SEASONAL_CYQ4',...])

Here's a working example. It need a little stylizing, but I've started some text styling on the axes to get it started.

Also, it's worth upgrading to use d3 v4 if your just getting started with it.

   var margin = {
    top: 30,
    right: 20,
    bottom: 80,
    left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;



var x =  d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

var valueline = d3.svg.line()
    .x(function (d) {
      return x(d.name);
    })
    .y(function (d) {
      return y(d.count);
    });

var svg = d3.select("body")
    .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 + ")");

// Get the data
var data = [{
                "name": "Seasonal Pop",
                "code": "SEASONAL_POP",
                "children": [{
                    "name": "SEASONAL_LYQ1",
                    "code": "SEASONAL_LYQ1",
                    "count": 1200
                }, {
                    "name": "SEASONAL_LYQ2",
                    "code": "SEASONAL_LYQ2",
                    "count": 2000
                }, {
                    "name": "SEASONAL_LYQ3",
                    "code": "SEASONAL_LYQ3",
                    "count": 1060
                }, {
                    "name": "SEASONAL_LYQ4",
                    "code": "SEASONAL_LYQ4",
                    "count": 2300
                }, {
                    "name": "SEASONAL_CYQ1",
                    "code": "SEASONAL_CYQ1",
                    "count": 1300
                }, {
                    "name": "SEASONAL_CYQ2",
                    "code": "SEASONAL_CYQ2",
                    "count": 3400
                }, {
                    "name": "SEASONAL_CYQ3",
                    "code": "SEASONAL_CYQ3",
                    "count": 4500
                }, {
                    "name": "SEASONAL_CYQ4",
                    "code": "SEASONAL_CYQ4",
                    "count": 5500
                }]
            }];

x.domain(data[0].children.map(d => d.name))
y.domain([0, d3.max(data[0].children, function (d) {
    return d.count;
    })]);

console.log("xed", x(data[0].children[0].name))


svg.append("path") // Add the valueline path.
.attr("d", valueline(data[0].children))

svg.append("g") // Add the X Axis
.attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr('font-size', '10px')
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

svg.append("g") // Add the Y Axis
.attr("class", "y axis")
    .call(yAxis)
    .selectAll('text')
    .attr('font-size', '10px')
body {
    font: 12px Arial;
}
path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.axis path, .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body></body>


Related Query

More Query from same tag