score:0

Accepted answer

You have some minor problems and a big problem.

The minor problems are:

  1. Your y scale should take into account the maximum value in your dataset:

    y.domain([0, d3.max(obj, function(d) {
        return d.jobs_success
    })]);
    
  2. Your line generator should use x0. Besides that, you'll have to move the line by half rangeBand:

    .x(function(d) {
        return x0(d.date_created) + x0.rangeBand() / 2;
    })
    
  3. By default, a <path> has a black fill. Change it:

    .style("fill", "none")
    

Those, however, are minor problems. The biggest problem lies here, in the data() method:

svg.append("path")
    .data(obj)
    .attr("class", "line")
    .attr("d", line);

Let's see in detail what's happening here. You're passing the obj array to the data(). However, if you do this, each element of that array will be passed, individually, to the line generator.

So, supposing that this is your array...

["foo", "bar", "baz"]

...what you're passing to the line generator is just:

"foo".

You have some different solutions here. First, you can pass the array to the line generator directly, as you did in your edit. Second, you can wrap the array in an outer array:

svg.append("path")
    .data([obj])
    .attr("class", "line")
    .attr("d", line);

That way, the whole obj array will be passed to the line generator.

Or, third, you can use datum:

svg.append("path")
    .datum(obj)
    .attr("class", "line")
    .attr("d", line);

Here is your code with those changes and using datum to draw the path:

var obj = [{
  "date_created": "2017-12-27",
  "jobs_fail": 19,
  "jobs_resub": 31,
  "jobs_success": 50
}, {
  "date_created": "2017-12-29",
  "jobs_fail": 18,
  "jobs_resub": 25,
  "jobs_success": 44
}, {
  "date_created": "2017-12-28",
  "jobs_fail": 8,
  "jobs_resub": 24,
  "jobs_success": 44
}, {
  "date_created": "2018-01-02",
  "jobs_fail": 2,
  "jobs_resub": 0,
  "jobs_success": 0
}];

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

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

var y = d3.scale.linear()
  .range([height, 0]);
var colorRange = d3.scale.category20();
var color = d3.scale.ordinal()
  .range(colorRange.range());
var divTooltip = d3.select("body").append("div").attr("class", "toolTip");

var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom");

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

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 + ")");

var options = d3.keys(obj[0]).filter(function(key) {
  if (key != "date_created" & key != "jobs_success") {
    return key
  }
}); // & key != "date_created"){return key} });

var line_option = d3.keys(obj[0]).filter(function(key) {
  if (key == "jobs_success" & key == "date_created") {
    return key
  }
});


obj.forEach(function(d) {
  d.valores = options.map(function(name) {
    return {
      name: name,
      value: +d[name]
    };
  });
});


x0.domain(obj.map(function(d) {
  return d.date_created;
}));
x1.domain(options).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(obj, function(d) {
  return d.jobs_success
})]);

var line = d3.svg.line()
  .x(function(d) {
    return x0(d.date_created) + x0.rangeBand() / 2;
  })
  .y(function(d) {
    return y(d.jobs_success);
  });

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Number of jobs");

var bar = svg.selectAll(".bar")
  .data(obj)
  .enter().append("g")
  .attr("class", "rect")
  .attr("transform", function(d) {
    return "translate(" + x0(d.date_created) + ",0)";
  });

bar.selectAll("rect")
  .data(function(d) {
    return d.valores;
  })
  .enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) {
    return x1(d.name);
  })
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("value", function(d) {
    return d.name;
  })
  .attr("height", function(d) {
    return height - y(d.value);
  })
  .style("fill", function(d) {
    return color(d.name);
  });

bar
  .on("mousemove", function(d) {
    divTooltip.style("left", d3.event.pageX + 10 + "px");
    divTooltip.style("top", d3.event.pageY - 25 + "px");
    divTooltip.style("display", "inline-block");
    var x = d3.event.pageX,
      y = d3.event.pageY
    var elements = document.querySelectorAll(':hover');
    l = elements.length
    l = l - 1
    elementData = elements[l].__data__
    divTooltip.html((d.date_created) + "<br>" + elementData.name + "<br>" + elementData.value);
  });
bar
  .on("mouseout", function(d) {
    divTooltip.style("display", "none");
  });


var legend = svg.selectAll(".legend")
  .data(options.slice())
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) {
    return "translate(0," + i * 20 + ")";
  });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) {
    return d;
  });
svg.append("path")
  .datum(obj)
  .attr("class", "line")
  .attr("d", line)
  .style("fill", "none")
  .style("stroke", "red")
  .style("stroke-width", 2);
.axis line,
.axis path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}
<script src="https://d3js.org/d3.v3.min.js"></script>

score:-1

Ok a couple of things. Your line's x function should be relying on x0 not x1:

var line = d3.svg.line()
    .x(function(d) { return x0(d.date_created); })
    .y(function(d) { return y(d.jobs_success); });

And your path needs to be called like this:

svg.append("path")
      .attr("class", "line")
      .attr("d", line(obj));

That should get you most of the way there - you might want to tweak the maximum y-value, and shift the x co-ordinate of the line by x0.rangeBand()/2 as well to make it line up properly with the centre of the bars.


Related Query

More Query from same tag