score:1

Accepted answer

You don't need to play around with start_x_old and start_x_new...

Just set a datum to your selections:

var xDrag = svg.selectAll(".serie")
    .datum({x: 0})
    .call(drag);
var xDrag1 = svg.selectAll(".axis--x")
    .datum({x: 0})
    .call(drag);

And use that in your drag:

function dragged(d) {
    xDrag.attr("transform", "translate(" + [(d.x = d3.event.x), 0] + ")");
    xDrag1.attr("transform", "translate(" + [(d.x = d3.event.x), height] + ")");
}

Here is your updated fiddle: https://jsfiddle.net/z0d8xpjg/

And the same code in the Stack snippet:

var start_x_old, start_x_new = 0,
  x_diff, xtranslated,
  svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = [{
  labelName: "Financial Data",
  no: 27,
  yes: 10
}, {
  labelName: "Production & completion data",
  no: 24,
  yes: 32
}, {
  labelName: "Support Center Data",
  no: 18,
  yes: 21
}];

/*var drag = d3.drag()
                .on('start.interrupt', function () {
                    xDrag.interrupt();
                    xDrag1.interrupt();
                })
                .on('start drag', function () {
                xDrag.attr("transform", "translate(" + (d3.event.x) + "," + 0 +")")
                xDrag1.attr("transform", "translate(" + (d3.event.x) + "," + height +")")
                });*/
var drag = d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended)

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.event.sourceEvent.preventDefault;

}

function dragged(d) {
  //console.log("dragging");
  //x_diff = start_x_old - start_x_new;
  xDrag.attr("transform", "translate(" + [(d.x = d3.event.x), 0] + ")");
  xDrag1.attr("transform", "translate(" + [(d.x = d3.event.x), height] + ")");
}

function dragended(d) {
  xDrag.datum({
    x: d3.event.x
  });
  xDrag1.datum({
    x: d3.event.x
  });
}
data.sort(function(a, b) {
  return (b.yes + b.no) - (a.yes + a.no);
});
var x = d3.scaleBand()
  .rangeRound([0, width])
  .padding(0.1)
  .align(0.1);

var y = d3.scaleLinear()
  .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
  .range(['#42c8c5', '#d05a59']);

var stack = d3.stack();
data.sort(function(a, b) {
  return (b.yes + b.no) - (a.yes + a.no);
});
x.domain(data.map(function(d) {
  return d.labelName;
}));
y.domain([0, d3.max(data, function(d) {
  return (d.yes + d.no);
})]).nice();
z.domain(Object.keys(data[0]).slice(1));
g.selectAll(".serie")
  .data(stack.keys(Object.keys(data[0]).slice(1))(data))
  .enter().append("g")
  .attr("class", "serie")
  .attr("fill", function(d) {
    return z(d.key);
  })
  .selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x(d.data.labelName);
  })
  .attr("y", function(d) {
    return y(d[1]);
  })
  .attr("height", function(d) {
    return y(d[0]) - y(d[1]);
  })
  .attr("width", x.bandwidth());

g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("transform", "rotate(-60)");

g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(y).ticks(10, "s"))
  .append("text")
  .attr("x", 2)
  .attr("y", y(y.ticks(10).pop()))
  .attr("dy", "0.35em")
  .attr("text-anchor", "start")
  .attr("fill", "#000");

var xDrag = svg.selectAll(".serie")
  .datum({
    x: 0
  })
  .call(drag);
var xDrag1 = svg.selectAll(".axis--x")
  .datum({
    x: 0
  })
  .call(drag);
.bar {
  fill: steelblue;
}

.axis path {
  display: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="700" height="500"></svg>


Related Query

More Query from same tag