<\/p>\nOne of the nice built-in features of D3.js is the ability to render a chart where you can highlight parts of the graph:<\/p>\n
<\/p>\n
The feature is called “brushes” in the d3 docs.<\/p>\n
Here I’ve tried to replicate this in the simplest possible way.<\/p>\n
We need some CSS, for both the blue color and the highlight\/selection box:<\/p>\n
\n.area {\n fill: steelblue;\n clip-path: url(#clip);\n}\n\n.axis path,\n.axis line {\n fill: none;\n stroke: #000;\n shape-rendering: crispEdges;\n}\n\n.brush .extent {\n stroke: #fff;\n fill-opacity: .125;\n shape-rendering: crispEdges;\n}\n\n.brush .extent {\n stroke: #fff;\n fill-opacity: .125;\n shape-rendering: crispEdges;\n}\n<\/html>\n\nNext we need some data. I'm just using something that looks like a matrix:\n\nlet data = [\n [0, 1],\n [2, 4]\n]\n<\/pre>\nThen we decide how big it should be. If you're going to use this inside React, it's nice to make a named div and size the div correctly up front, so that the screen doesn't flicker.<\/p>\n
\nlet margin = {top: 0, right: 0, bottom: 0, left: 0},\n width = 200 - margin.left - margin.right,\n height = 30 - margin.top - margin.bottom;\n\nlet histogramStyle = {\n \"width\": width,\n \"height\": height \n};\n<\/pre>\nWe'll also need to define a selector that we can use to place the chart:<\/p>\n
\nlet divId = '#chart';\n<\/pre>\nNow, we add the code to render the chart:<\/p>\n
\n let x = d3.scale.linear()\n .range([width, 0]),\n y = d3.scale.linear()\n .range([height, 0]);\n \n let \n xAxis = d3.svg.axis()\n .scale(x)\n .orient(\"bottom\"),\n yAxis = d3.svg.axis()\n .scale(y)\n .orient(\"left\");\n\n let area = d3.svg.area()\n .x((d) => x(d[0]))\n .y0(height)\n .y1((d) => y(d[1]));\n \n let svg = d3.select(divId).append(\"svg\")\n .attr(\"width\", width + margin.left + margin.right)\n .attr(\"height\", height + margin.top + margin.bottom)\n .append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\n x.domain(d3.extent(data, (d) => d[0]));\n y.domain([0, d3.max(data, (d) => d[1])]);\n\n let brush = d3.svg.brush()\n .x(x)\n .on(\"brushend\", brushend);\n\n svg.append(\"path\")\n .datum(data)\n .attr(\"class\", \"area\")\n .attr(\"d\", area);\n \n svg.append(\"g\")\n .attr(\"class\", \"x brush\")\n .call(brush)\n .selectAll(\"rect\")\n .attr(\"y\", -6)\n .attr(\"height\", height + 7);\n <\/pre>\nTo handle the user's selections, the chart lets you define a callback and you receive the min and max values, so you can call out to your code and do whatever you need. <\/p>\n
\nfunction brushed() {\n x.domain(brush.empty() ? x.domain() : brush.extent());\n}\n\nfunction brushend() { \n if (self.props.facetHandler) {\n self.props.facetHandler(brush.extent()[0], brush.extent[1]);\n }\n} \n<\/pre>\nThe callback gets run every time the user drags, not just when they are finished. One simple way to resolve this is to debounce the callback:<\/p>\n
\nlet _ = require('lodash');\nlet facetHandler = _.debounce(this.props.facetHandler, 250);\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Rendering a selectable chart with d3.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[136,302],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t