He creado un despojadoJSFiddle de mi gráfico D3. Lo hice receptivo (con viewbox y preserveaspectratio) usando la solución en:gráfico D3 receptivo

Cuando cambio el tamaño de la ventana y la hago más pequeña, algunas de las líneas de la cuadrícula parecen estar desapareciendo y reapareciendo. Supongo que esto se verá mal en pequeñas resoluciones (por ejemplo, teléfono móvil 320x480). ¿Hay alguna forma de preservar mis líneas de cuadrícula cuando el tamaño de la ventana se reduce?

Código HTML:

<!--//d3 chart//-->
<div class="centre-div"></div>

Código CSS:

.centre-div {
  margin: 0 auto;
  max-width: 550px;
}

/* D3 chart css */
.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

Código JS:

//function createScatterplot() {
//Width and height
var margin = {
  top: 15,
  right: 2,
  bottom: 2,
  left: 2
};
//define width and height as the inner dimensions of the chart area.
var width = 550 - margin.left - margin.right;
var height = 550 - margin.top - margin.bottom;
var padding = 10;

//define svg as a G element that translates the origin to the top-left corner of the chart area.

//add <svg> to the last <div class="centre-div"> tag on the html page 
//this allows me to reuse the createScatterplot() function to draw multiple charts
var svg = d3.select(d3.selectAll(".centre-div")[0].pop()).append("svg")
  //.attr("width", width + margin.left + margin.right)
  //.attr("height", height + margin.top + margin.bottom)
  //make svg responsive
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 550 550")
  .attr("preserveAspectRatio", "xMidYMid meet")
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//With this convention, all subsequent code can ignore margins.
//http://bl.ocks.org/mbostock/3019563

//Static dataset
var dataset = [
  [5, -2, "A"],
  [-4, -9, "B"],
  [2, 5, "C"],
  [1, -3, "D"],
  [-3, 5, "E"],
  [4, 1, "F"],
  [4, 4, "G"],
  [5, 7, "H"],
  [-5, -2, "I"],
  [0, 8, "J"],
  [-6, -5, "K"]
];

//Create scale functions
var xScale = d3.scale.linear()
  .domain([-10, 11])
  .range([padding, width - padding * 2]);

var yScale = d3.scale.linear()
  .domain([-10, 11])
  .range([height - padding, padding]);

//different scale for gridlines, so last tick has no line
var xScale2 = d3.scale.linear()
  .domain([-10, 10])
  .range([padding, width - padding * 2]);

var yScale2 = d3.scale.linear()
  .domain([-10, 10])
  .range([height - padding, padding]);
//add arrowheads
defs = svg.append("defs")
defs.append("marker")
  .attr({
    "id": "arrow",
    "viewBox": "-5 -5 10 10",
    "refX": 0,
    "refY": 0,
    "markerWidth": 7, //marker size
    "markerHeight": 7, //marker size
    "orient": "auto"
  })
  .append("path")
  .attr("d", "M 0,0 m -5,-5 L 5,0 L -5,5 Z")
  .attr("fill", "#000");

//Define X axis
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .ticks(22)
  //Define Y axis
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(22)

//create scatterplot crosses
svg.selectAll("line.diag1")
  .data(dataset)
  .enter()
  .append("line")
  .attr({
    "class": "diag1",
    "x1": function(d) {
      return xScale(d[0]) - 4;
    },
    "y1": function(d) {
      return yScale(d[1]) - 4;
    },
    "x2": function(d) {
      return xScale(d[0]) + 4;
    },
    "y2": function(d) {
      return yScale(d[1]) + 4;
    },
    "stroke": "#006CCA",
    "opacity": "1",
    "stroke-width": "2px"
  });
svg.selectAll("line.diag2")
  .data(dataset)
  .enter()
  .append("line")
  .attr({
    "class": "diag2",
    "x1": function(d) {
      return xScale(d[0]) + 4;
    },
    "y1": function(d) {
      return yScale(d[1]) - 4;
    },
    "x2": function(d) {
      return xScale(d[0]) - 4;
    },
    "y2": function(d) {
      return yScale(d[1]) + 4;
    },
    "stroke": "#006CCA",
    "opacity": "1",
    "stroke-width": "2px"
  });

//Create X axis
svg.append("g")
  .attr("class", "axis")
  .style("stroke-width", 2)
  .attr("transform", "translate(0," + 11 * (height) / 21 + ")")
  .call(xAxis)
  //add x label
  .append("text")
  .attr("class", "label")
  .attr("x", width)
  .attr("y", 15)
  .attr("font-style", "italic")
  .attr("font-weight", "bold")
  .style("text-anchor", "end")
  .text("x");

//Create Y axis
svg.append("g")
  .attr("class", "axis")
  .style("stroke-width", 2)
  .attr("transform", "translate(" + 10 * (width - padding) / 21 + ",0)")
  .call(yAxis)
  //add y label
  .append("text")
  .attr("class", "label")
  .attr("x", -10)
  .attr("y", -5)
  .attr("font-style", "italic")
  .attr("font-weight", "bold")
  .style("text-anchor", "end")
  .text("y");

//add arrowheads to axis ends   
//add line on top of x-axis and arrowhead
svg.append("line")
  .attr({
    "x1": 0,
    "y1": 11 * height / 21,
    "x2": width - padding * 1.5,
    "y2": 11 * height / 21,
    "stroke": "black",
    "stroke-width": "2px",
    "marker-end": "url(#arrow)"
  });
//add line on top of y-axis and arrowhead
svg.append("line")
  .attr({
    "x1": 10 * (width - padding) / 21,
    "y1": height,
    "x2": 10 * (width - padding) / 21,
    "y2": 0.4 * padding,
    "stroke": "black",
    "stroke-width": "2px",
    "marker-end": "url(#arrow)"
  });

//Assuming that you have Mike Bostock's standard margins defined and you have defined a linear scale for the y-axis the following code will create horizontal gridlines without using tickSize().   
//https://stackoverflow.com/questions/15580300/proper-way-to-draw-gridlines

//create horizontal grid lines      
var gridwidth = 19 * width / 20;
var gridheight = 19 * height / 20;
svg.selectAll("line.horizontalGrid").data(yScale2.ticks(20)).enter()
  .append("line")
  .attr({
    "class": "horizontalGrid",
    "x1": 0,
    "x2": gridwidth,
    "y1": function(d) {
      return yScale(d);
    },
    "y2": function(d) {
      return yScale(d);
    },
    "fill": "none",
    "shape-rendering": "crispEdges",
    "stroke": "black",
    "stroke-width": "1px",
    "opacity": "0.3"
  });
//create vertical gridlines
svg.selectAll("line.verticalGrid").data(xScale2.ticks(20)).enter()
  .append("line")
  .attr({
    "class": "verticalGrid",
    "y1": height - gridheight,
    "y2": height,
    "x1": function(d) {
      return xScale(d);
    },
    "x2": function(d) {
      return xScale(d);
    },
    "fill": "none",
    "shape-rendering": "crispEdges",
    "stroke": "black",
    "stroke-width": "1px",
    "opacity": "0.3"
  });

//remove last ticks and zero ticks
svg.selectAll(".tick")
  .filter(function(d) {
    return d === 11;
  })
  .remove();
svg.selectAll(".tick")
  .filter(function(d) {
    return d === 0;
  })
  .remove();
//add a custom origin identifier
svg.append("text")
  .attr({
    "class": "origintext",
    "x": 455 * width / 1000,
    "y": 552 * height / 1000,
    "text-anchor": "end",
    "font-size": "65%"
  })
  .text("0");

//add labels to points plotted
svg.selectAll("textlabels")
  .data(dataset)
  .enter()
  .append("text")
  .text(function(d) {
    return d[2];
  })
  .attr("x", function(d) {
    return xScale(d[0]) + 5;
  })
  .attr("y", function(d) {
    return yScale(d[1]) - 5;
  })
  .attr("font-weight", "bold")
  .attr("font-size", "12px")
  .attr("fill", "black");

//}