Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<svg width="600" height="400"></svg>
<script id="jsbin-javascript">
// Стандартный кусок кода для описания ширины и отступов графика
var svg = d3.select("svg"),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
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 lineData = [{x:0,y:20},{x:5,y:15},{x:10,y:-10},{x:20,y:25},{x:25,y:30}]
var materialData1 = [{x:0,y:130},{x:20,y:130}]
var materialData2 = [{x:20,y:130},{x:25,y:130}]
// Объединяем данные линии и закраску диапозонов
var allData = lineData.concat(materialData1).concat(materialData2)
var allDataMinMaxX = d3.extent(allData, d => d.x)
var allDataMinMaxY = d3.extent(allData, d => d.y)
// Функции, которые масштабируют данные к координатам
var x = d3.scaleLinear()
.domain(allDataMinMaxX)
.range([0, width])
var y = d3.scaleLinear()
.domain(allDataMinMaxY)
.range([height, 0])
// Функция линии
var line = d3.line()
.x(d => x(d.x))
.y(d => y(d.y))
// Добавляем ось снизу
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Добавляем ось слева
g.append("g")
.call(d3.axisLeft(y))
// Добавляем линию
g.append("path")
.datum(lineData)
.attr("fill", "none")
.attr("stroke", "#3e95cd")
.attr("d", line)
// Функция, которая добавляет прямоугольник по координатам
function drawMaterial(materialData, fill) {
// Выясняем минимальную и максимальные точки по x и y.
var materialMinMaxX = d3.extent(materialData, d => d.x); // [Xmin, Xmax]
g.append("rect")
// Ширина = максимум минус минимум
.attr("width", x(materialMinMaxX[1] - materialMinMaxX[0]))
// Высота = высота всего графика
.attr("height", height)
// Отступ слева
.attr("x", x(materialMinMaxX[0]))
// Отступ сверху
.attr("y", 0)
// Цвет
.attr("fill", fill)
}
drawMaterial(materialData1, "rgba(220,100,220,0.2)")
drawMaterial(materialData2, "rgba(120,220,220,0.2)")
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Стандартный кусок кода для описания ширины и отступов графика
var svg = d3.select("svg"),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
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 lineData = [{x:0,y:20},{x:5,y:15},{x:10,y:-10},{x:20,y:25},{x:25,y:30}]
var materialData1 = [{x:0,y:130},{x:20,y:130}]
var materialData2 = [{x:20,y:130},{x:25,y:130}]
// Объединяем данные линии и закраску диапозонов
var allData = lineData.concat(materialData1).concat(materialData2)
var allDataMinMaxX = d3.extent(allData, d => d.x)
var allDataMinMaxY = d3.extent(allData, d => d.y)
// Функции, которые масштабируют данные к координатам
var x = d3.scaleLinear()
.domain(allDataMinMaxX)
.range([0, width])
var y = d3.scaleLinear()
.domain(allDataMinMaxY)
.range([height, 0])
// Функция линии
var line = d3.line()
.x(d => x(d.x))
.y(d => y(d.y))
// Добавляем ось снизу
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Добавляем ось слева
g.append("g")
.call(d3.axisLeft(y))
// Добавляем линию
g.append("path")
.datum(lineData)
.attr("fill", "none")
.attr("stroke", "#3e95cd")
.attr("d", line)
// Функция, которая добавляет прямоугольник по координатам
function drawMaterial(materialData, fill) {
// Выясняем минимальную и максимальные точки по x и y.
var materialMinMaxX = d3.extent(materialData, d => d.x); // [Xmin, Xmax]
g.append("rect")
// Ширина = максимум минус минимум
.attr("width", x(materialMinMaxX[1] - materialMinMaxX[0]))
// Высота = высота всего графика
.attr("height", height)
// Отступ слева
.attr("x", x(materialMinMaxX[0]))
// Отступ сверху
.attr("y", 0)
// Цвет
.attr("fill", fill)
}
drawMaterial(materialData1, "rgba(220,100,220,0.2)")
drawMaterial(materialData2, "rgba(120,220,220,0.2)")
</script>
// Стандартный кусок кода для описания ширины и отступов графика
var svg = d3.select("svg"),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
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 lineData = [{x:0,y:20},{x:5,y:15},{x:10,y:-10},{x:20,y:25},{x:25,y:30}]
var materialData1 = [{x:0,y:130},{x:20,y:130}]
var materialData2 = [{x:20,y:130},{x:25,y:130}]
// Объединяем данные линии и закраску диапозонов
var allData = lineData.concat(materialData1).concat(materialData2)
var allDataMinMaxX = d3.extent(allData, d => d.x)
var allDataMinMaxY = d3.extent(allData, d => d.y)
// Функции, которые масштабируют данные к координатам
var x = d3.scaleLinear()
.domain(allDataMinMaxX)
.range([0, width])
var y = d3.scaleLinear()
.domain(allDataMinMaxY)
.range([height, 0])
// Функция линии
var line = d3.line()
.x(d => x(d.x))
.y(d => y(d.y))
// Добавляем ось снизу
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
// Добавляем ось слева
g.append("g")
.call(d3.axisLeft(y))
// Добавляем линию
g.append("path")
.datum(lineData)
.attr("fill", "none")
.attr("stroke", "#3e95cd")
.attr("d", line)
// Функция, которая добавляет прямоугольник по координатам
function drawMaterial(materialData, fill) {
// Выясняем минимальную и максимальные точки по x и y.
var materialMinMaxX = d3.extent(materialData, d => d.x); // [Xmin, Xmax]
g.append("rect")
// Ширина = максимум минус минимум
.attr("width", x(materialMinMaxX[1] - materialMinMaxX[0]))
// Высота = высота всего графика
.attr("height", height)
// Отступ слева
.attr("x", x(materialMinMaxX[0]))
// Отступ сверху
.attr("y", 0)
// Цвет
.attr("fill", fill)
}
drawMaterial(materialData1, "rgba(220,100,220,0.2)")
drawMaterial(materialData2, "rgba(120,220,220,0.2)")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment