CODEWITHSUNDEEP
javascriptcssd3.js
ganesh
ganesh

Reputation: 143

Need to Hide or Remove alternative x-axis values in d3 charts

In x-axis I need to show only values like - 0.5, 1.5, 2.5, 3.5 and hide/remove other value labels(0.0, 1.0, 2.0 etc.,). I'm using D3 v3.

Chart Output should be like in the below image

Chart Output should be like in the below image

This is the code:

var data = [{
    label: "Data Set 1",
    x: [0, 1, 2, 3, 4],
    y: [0, 1, 2, 3, 4]
  },
  {
    label: "Data Set 2",
    x: [0, 1, 2, 3, 4],
    y: [0, 1, 4, 9, 16]
  }
];
var xy_chart = d3_xy_chart()
  .width(960)
  .height(500)
  .xlabel("X Axis")
  .ylabel("Y Axis");
var svg = d3.select("body").append("svg")
  .datum(data)
  .call(xy_chart);

function d3_xy_chart() {
  var width = 640,
    height = 480,
    xlabel = "X Axis Label",
    ylabel = "Y Axis Label";

  function chart(selection) {
    selection.each(function(datasets) {
      //
      // Create the plot. 
      //
      var margin = {
          top: 20,
          right: 80,
          bottom: 30,
          left: 50
        },
        innerwidth = width - margin.left - margin.right,
        innerheight = height - margin.top - margin.bottom;

      var x_scale = d3.scale.linear()
        .range([0, innerwidth])
        .domain([d3.min(datasets, function(d) {
            return d3.min(d.x);
          }),
          d3.max(datasets, function(d) {
            return d3.max(d.x);
          })
        ]);

      var y_scale = d3.scale.linear()
        .range([innerheight, 0])
        .domain([d3.min(datasets, function(d) {
            return d3.min(d.y);
          }),
          d3.max(datasets, function(d) {
            return d3.max(d.y);
          })
        ]);

      var color_scale = d3.scale.category10()
        .domain(d3.range(datasets.length));

      var x_axis = d3.svg.axis()
        .scale(x_scale)
        .orient("bottom");

      var y_axis = d3.svg.axis()
        .scale(y_scale)
        .orient("left");

      var x_grid = d3.svg.axis()
        .scale(x_scale)
        .orient("bottom")
        .tickSize(-innerheight)
        .tickFormat("");

      var y_grid = d3.svg.axis()
        .scale(y_scale)
        .orient("left")
        .tickSize(-innerwidth)
        .tickFormat("");

      var draw_line = d3.svg.line()
        .interpolate("basis")
        .x(function(d) {
          return x_scale(d[0]);
        })
        .y(function(d) {
          return y_scale(d[1]);
        });

      var svg = d3.select(this)
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      svg.append("g")
        .attr("class", "x grid")
        .attr("transform", "translate(0," + innerheight + ")")
        .call(x_grid);

      svg.append("g")
        .attr("class", "y grid")
        .call(y_grid);

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerheight + ")")
        .call(x_axis)
        .append("text")
        .attr("dy", "-.71em")
        .attr("x", innerwidth)
        .style("text-anchor", "end")
        .text(xlabel);

      svg.append("g")
        .attr("class", "y axis")
        .call(y_axis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .style("text-anchor", "end")
        .text(ylabel);

      var data_lines = svg.selectAll(".d3_xy_chart_line")
        .data(datasets.map(function(d) {
          return d3.zip(d.x, d.y);
        }))
        .enter().append("g")
        .attr("class", "d3_xy_chart_line");

      data_lines.append("path")
        .attr("class", "line")
        .attr("d", function(d) {
          return draw_line(d);
        })
        .attr("stroke", function(_, i) {
          return color_scale(i);
        });

      data_lines.append("text")
        .datum(function(d, i) {
          return {
            name: datasets[i].label,
            final: d[d.length - 1]
          };
        })
        .attr("transform", function(d) {
          return ("translate(" + x_scale(d.final[0]) + "," +
            y_scale(d.final[1]) + ")");
        })
        .attr("x", 3)
        .attr("dy", ".35em")
        .attr("fill", function(_, i) {
          return color_scale(i);
        })
        .text(function(d) {
          return d.name;
        });

    });
  }

  chart.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return chart;
  };

  chart.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return chart;
  };

  chart.xlabel = function(value) {
    if (!arguments.length) return xlabel;
    xlabel = value;
    return chart;
  };

  chart.ylabel = function(value) {
    if (!arguments.length) return ylabel;
    ylabel = value;
    return chart;
  };

  return chart;
}
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.grid path,
.grid line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.25);
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke-width: 2.5px;
}

Upvotes: 1

Views: 1288

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Use tickValues and a remainder operator to check for integers:

.tickFormat(d => d%1 ? d : null);

Here is the code with that change:

var data = [{
    label: "Data Set 1",
    x: [0, 1, 2, 3, 4],
    y: [0, 1, 2, 3, 4]
  },
  {
    label: "Data Set 2",
    x: [0, 1, 2, 3, 4],
    y: [0, 1, 4, 9, 16]
  }
];
var xy_chart = d3_xy_chart()
  .width(960)
  .height(500)
  .xlabel("X Axis")
  .ylabel("Y Axis");
var svg = d3.select("body").append("svg")
  .datum(data)
  .call(xy_chart);

function d3_xy_chart() {
  var width = 640,
    height = 480,
    xlabel = "X Axis Label",
    ylabel = "Y Axis Label";

  function chart(selection) {
    selection.each(function(datasets) {
      //
      // Create the plot. 
      //
      var margin = {
          top: 20,
          right: 80,
          bottom: 30,
          left: 50
        },
        innerwidth = width - margin.left - margin.right,
        innerheight = height - margin.top - margin.bottom;

      var x_scale = d3.scale.linear()
        .range([0, innerwidth])
        .domain([d3.min(datasets, function(d) {
            return d3.min(d.x);
          }),
          d3.max(datasets, function(d) {
            return d3.max(d.x);
          })
        ]);

      var y_scale = d3.scale.linear()
        .range([innerheight, 0])
        .domain([d3.min(datasets, function(d) {
            return d3.min(d.y);
          }),
          d3.max(datasets, function(d) {
            return d3.max(d.y);
          })
        ]);

      var color_scale = d3.scale.category10()
        .domain(d3.range(datasets.length));

      var x_axis = d3.svg.axis()
        .scale(x_scale)
        .orient("bottom")
        .tickFormat(d => d % 1 ? d : null);

      var y_axis = d3.svg.axis()
        .scale(y_scale)
        .orient("left");

      var x_grid = d3.svg.axis()
        .scale(x_scale)
        .orient("bottom")
        .tickSize(-innerheight)
        .tickFormat("");

      var y_grid = d3.svg.axis()
        .scale(y_scale)
        .orient("left")
        .tickSize(-innerwidth)
        .tickFormat("");

      var draw_line = d3.svg.line()
        .interpolate("basis")
        .x(function(d) {
          return x_scale(d[0]);
        })
        .y(function(d) {
          return y_scale(d[1]);
        });

      var svg = d3.select(this)
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      svg.append("g")
        .attr("class", "x grid")
        .attr("transform", "translate(0," + innerheight + ")")
        .call(x_grid);

      svg.append("g")
        .attr("class", "y grid")
        .call(y_grid);

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerheight + ")")
        .call(x_axis)
        .append("text")
        .attr("dy", "-.71em")
        .attr("x", innerwidth)
        .style("text-anchor", "end")
        .text(xlabel);

      svg.append("g")
        .attr("class", "y axis")
        .call(y_axis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .style("text-anchor", "end")
        .text(ylabel);

      var data_lines = svg.selectAll(".d3_xy_chart_line")
        .data(datasets.map(function(d) {
          return d3.zip(d.x, d.y);
        }))
        .enter().append("g")
        .attr("class", "d3_xy_chart_line");

      data_lines.append("path")
        .attr("class", "line")
        .attr("d", function(d) {
          return draw_line(d);
        })
        .attr("stroke", function(_, i) {
          return color_scale(i);
        });

      data_lines.append("text")
        .datum(function(d, i) {
          return {
            name: datasets[i].label,
            final: d[d.length - 1]
          };
        })
        .attr("transform", function(d) {
          return ("translate(" + x_scale(d.final[0]) + "," +
            y_scale(d.final[1]) + ")");
        })
        .attr("x", 3)
        .attr("dy", ".35em")
        .attr("fill", function(_, i) {
          return color_scale(i);
        })
        .text(function(d) {
          return d.name;
        });

    });
  }

  chart.width = function(value) {
    if (!arguments.length) return width;
    width = value;
    return chart;
  };

  chart.height = function(value) {
    if (!arguments.length) return height;
    height = value;
    return chart;
  };

  chart.xlabel = function(value) {
    if (!arguments.length) return xlabel;
    xlabel = value;
    return chart;
  };

  chart.ylabel = function(value) {
    if (!arguments.length) return ylabel;
    ylabel = value;
    return chart;
  };

  return chart;
}
body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.grid path,
.grid line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.25);
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke-width: 2.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

Upvotes: 1

Related Questions