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
This is the code:
JavaScript
x
192
192
1
var data = [{2
label: "Data Set 1",3
x: [0, 1, 2, 3, 4],4
y: [0, 1, 2, 3, 4]5
},6
{7
label: "Data Set 2",8
x: [0, 1, 2, 3, 4],9
y: [0, 1, 4, 9, 16]10
}11
];12
var xy_chart = d3_xy_chart()13
.width(960)14
.height(500)15
.xlabel("X Axis")16
.ylabel("Y Axis");17
var svg = d3.select("body").append("svg")18
.datum(data)19
.call(xy_chart);20
21
function d3_xy_chart() {22
var width = 640,23
height = 480,24
xlabel = "X Axis Label",25
ylabel = "Y Axis Label";26
27
function chart(selection) {28
selection.each(function(datasets) {29
//30
// Create the plot. 31
//32
var margin = {33
top: 20,34
right: 80,35
bottom: 30,36
left: 5037
},38
innerwidth = width - margin.left - margin.right,39
innerheight = height - margin.top - margin.bottom;40
41
var x_scale = d3.scale.linear()42
.range([0, innerwidth])43
.domain([d3.min(datasets, function(d) {44
return d3.min(d.x);45
}),46
d3.max(datasets, function(d) {47
return d3.max(d.x);48
})49
]);50
51
var y_scale = d3.scale.linear()52
.range([innerheight, 0])53
.domain([d3.min(datasets, function(d) {54
return d3.min(d.y);55
}),56
d3.max(datasets, function(d) {57
return d3.max(d.y);58
})59
]);60
61
var color_scale = d3.scale.category10()62
.domain(d3.range(datasets.length));63
64
var x_axis = d3.svg.axis()65
.scale(x_scale)66
.orient("bottom");67
68
var y_axis = d3.svg.axis()69
.scale(y_scale)70
.orient("left");71
72
var x_grid = d3.svg.axis()73
.scale(x_scale)74
.orient("bottom")75
.tickSize(-innerheight)76
.tickFormat("");77
78
var y_grid = d3.svg.axis()79
.scale(y_scale)80
.orient("left")81
.tickSize(-innerwidth)82
.tickFormat("");83
84
var draw_line = d3.svg.line()85
.interpolate("basis")86
.x(function(d) {87
return x_scale(d[0]);88
})89
.y(function(d) {90
return y_scale(d[1]);91
});92
93
var svg = d3.select(this)94
.attr("width", width)95
.attr("height", height)96
.append("g")97
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");98
99
svg.append("g")100
.attr("class", "x grid")101
.attr("transform", "translate(0," + innerheight + ")")102
.call(x_grid);103
104
svg.append("g")105
.attr("class", "y grid")106
.call(y_grid);107
108
svg.append("g")109
.attr("class", "x axis")110
.attr("transform", "translate(0," + innerheight + ")")111
.call(x_axis)112
.append("text")113
.attr("dy", "-.71em")114
.attr("x", innerwidth)115
.style("text-anchor", "end")116
.text(xlabel);117
118
svg.append("g")119
.attr("class", "y axis")120
.call(y_axis)121
.append("text")122
.attr("transform", "rotate(-90)")123
.attr("y", 6)124
.attr("dy", "0.71em")125
.style("text-anchor", "end")126
.text(ylabel);127
128
var data_lines = svg.selectAll(".d3_xy_chart_line")129
.data(datasets.map(function(d) {130
return d3.zip(d.x, d.y);131
}))132
.enter().append("g")133
.attr("class", "d3_xy_chart_line");134
135
data_lines.append("path")136
.attr("class", "line")137
.attr("d", function(d) {138
return draw_line(d);139
})140
.attr("stroke", function(_, i) {141
return color_scale(i);142
});143
144
data_lines.append("text")145
.datum(function(d, i) {146
return {147
name: datasets[i].label,148
final: d[d.length - 1]149
};150
})151
.attr("transform", function(d) {152
return ("translate(" + x_scale(d.final[0]) + "," +153
y_scale(d.final[1]) + ")");154
})155
.attr("x", 3)156
.attr("dy", ".35em")157
.attr("fill", function(_, i) {158
return color_scale(i);159
})160
.text(function(d) {161
return d.name;162
});163
164
});165
}166
167
chart.width = function(value) {168
if (!arguments.length) return width;169
width = value;170
return chart;171
};172
173
chart.height = function(value) {174
if (!arguments.length) return height;175
height = value;176
return chart;177
};178
179
chart.xlabel = function(value) {180
if (!arguments.length) return xlabel;181
xlabel = value;182
return chart;183
};184
185
chart.ylabel = function(value) {186
if (!arguments.length) return ylabel;187
ylabel = value;188
return chart;189
};190
191
return chart;192
}JavaScript
1
26
26
1
body {2
font: 10px sans-serif;3
}4
5
.axis path,6
.axis line {7
fill: none;8
stroke: #000;9
shape-rendering: crispEdges;10
}11
12
.grid path,13
.grid line {14
fill: none;15
stroke: rgba(0, 0, 0, 0.25);16
shape-rendering: crispEdges;17
}18
19
.x.axis path {20
display: none;21
}22
23
.line {24
fill: none;25
stroke-width: 2.5px;26
}Advertisement
Answer
Use tickValues and a remainder operator to check for integers:
JavaScript
1
2
1
.tickFormat(d => d%1 ? d : null);2
Here is the code with that change:
JavaScript
1
193
193
1
var data = [{2
label: "Data Set 1",3
x: [0, 1, 2, 3, 4],4
y: [0, 1, 2, 3, 4]5
},6
{7
label: "Data Set 2",8
x: [0, 1, 2, 3, 4],9
y: [0, 1, 4, 9, 16]10
}11
];12
var xy_chart = d3_xy_chart()13
.width(960)14
.height(500)15
.xlabel("X Axis")16
.ylabel("Y Axis");17
var svg = d3.select("body").append("svg")18
.datum(data)19
.call(xy_chart);20
21
function d3_xy_chart() {22
var width = 640,23
height = 480,24
xlabel = "X Axis Label",25
ylabel = "Y Axis Label";26
27
function chart(selection) {28
selection.each(function(datasets) {29
//30
// Create the plot. 31
//32
var margin = {33
top: 20,34
right: 80,35
bottom: 30,36
left: 5037
},38
innerwidth = width - margin.left - margin.right,39
innerheight = height - margin.top - margin.bottom;40
41
var x_scale = d3.scale.linear()42
.range([0, innerwidth])43
.domain([d3.min(datasets, function(d) {44
return d3.min(d.x);45
}),46
d3.max(datasets, function(d) {47
return d3.max(d.x);48
})49
]);50
51
var y_scale = d3.scale.linear()52
.range([innerheight, 0])53
.domain([d3.min(datasets, function(d) {54
return d3.min(d.y);55
}),56
d3.max(datasets, function(d) {57
return d3.max(d.y);58
})59
]);60
61
var color_scale = d3.scale.category10()62
.domain(d3.range(datasets.length));63
64
var x_axis = d3.svg.axis()65
.scale(x_scale)66
.orient("bottom")67
.tickFormat(d => d % 1 ? d : null);68
69
var y_axis = d3.svg.axis()70
.scale(y_scale)71
.orient("left");72
73
var x_grid = d3.svg.axis()74
.scale(x_scale)75
.orient("bottom")76
.tickSize(-innerheight)77
.tickFormat("");78
79
var y_grid = d3.svg.axis()80
.scale(y_scale)81
.orient("left")82
.tickSize(-innerwidth)83
.tickFormat("");84
85
var draw_line = d3.svg.line()86
.interpolate("basis")87
.x(function(d) {88
return x_scale(d[0]);89
})90
.y(function(d) {91
return y_scale(d[1]);92
});93
94
var svg = d3.select(this)95
.attr("width", width)96
.attr("height", height)97
.append("g")98
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");99
100
svg.append("g")101
.attr("class", "x grid")102
.attr("transform", "translate(0," + innerheight + ")")103
.call(x_grid);104
105
svg.append("g")106
.attr("class", "y grid")107
.call(y_grid);108
109
svg.append("g")110
.attr("class", "x axis")111
.attr("transform", "translate(0," + innerheight + ")")112
.call(x_axis)113
.append("text")114
.attr("dy", "-.71em")115
.attr("x", innerwidth)116
.style("text-anchor", "end")117
.text(xlabel);118
119
svg.append("g")120
.attr("class", "y axis")121
.call(y_axis)122
.append("text")123
.attr("transform", "rotate(-90)")124
.attr("y", 6)125
.attr("dy", "0.71em")126
.style("text-anchor", "end")127
.text(ylabel);128
129
var data_lines = svg.selectAll(".d3_xy_chart_line")130
.data(datasets.map(function(d) {131
return d3.zip(d.x, d.y);132
}))133
.enter().append("g")134
.attr("class", "d3_xy_chart_line");135
136
data_lines.append("path")137
.attr("class", "line")138
.attr("d", function(d) {139
return draw_line(d);140
})141
.attr("stroke", function(_, i) {142
return color_scale(i);143
});144
145
data_lines.append("text")146
.datum(function(d, i) {147
return {148
name: datasets[i].label,149
final: d[d.length - 1]150
};151
})152
.attr("transform", function(d) {153
return ("translate(" + x_scale(d.final[0]) + "," +154
y_scale(d.final[1]) + ")");155
})156
.attr("x", 3)157
.attr("dy", ".35em")158
.attr("fill", function(_, i) {159
return color_scale(i);160
})161
.text(function(d) {162
return d.name;163
});164
165
});166
}167
168
chart.width = function(value) {169
if (!arguments.length) return width;170
width = value;171
return chart;172
};173
174
chart.height = function(value) {175
if (!arguments.length) return height;176
height = value;177
return chart;178
};179
180
chart.xlabel = function(value) {181
if (!arguments.length) return xlabel;182
xlabel = value;183
return chart;184
};185
186
chart.ylabel = function(value) {187
if (!arguments.length) return ylabel;188
ylabel = value;189
return chart;190
};191
192
return chart;193
}JavaScript
1
26
26
1
body {2
font: 10px sans-serif;3
}4
5
.axis path,6
.axis line {7
fill: none;8
stroke: #000;9
shape-rendering: crispEdges;10
}11
12
.grid path,13
.grid line {14
fill: none;15
stroke: rgba(0, 0, 0, 0.25);16
shape-rendering: crispEdges;17
}18
19
.x.axis path {20
display: none;21
}22
23
.line {24
fill: none;25
stroke-width: 2.5px;26
}JavaScript
1
1
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>