javascript - 根据数据有条件地填充多个 svg

Question

在我下面的代码中，我有两个年历，两个用户在每个日历上显示同一年。

在下面的代码中，我做了一个条件填充检查日期是否是周末并将其填充为灰色，效果很好。

    .attr("fill", function(d) {
        var value = new Date(d).getDay();
        var check = (value === 6 || value === 0) // Check if weekend
        if (check) return "#E0E0E0"
        else return "none"; 
    });

如果提供了特定日期，我现在想做的是填充一个红色方 block ，例如:

if (d == "2018-10-12") return "red"

这里的问题是它显然将两个日历都填充为红色，因为它们都有那个日期。

我不确定如何将日期与每个 svg 的数据数组进行比较，这是我想将日期与之进行比较的测试数据。

var data = [
    {id: "Some_Name", dates: ["2018-01-01", "2018-02-11"]},    // <-- svg1
    {id: "Another_Name", dates: ["2018-03-01", "2018-04-11"]}, // <-- svg2
]

上面的数据片段是任意的，如果你有另一个数据结构，或者甚至只是一个字符串来比较日期(对于每个 svg)，那也没关系。

所有代码如下:

var formatDay = d3.timeFormat("%d");
var formatDate = d3.timeFormat("%Y-%m-%d");

var data = [
	{id: "Some_Name", dates: ["2018-01-01", "2018-02-11"]},
	{id: "Another_Name", dates: ["2018-03-01", "2018-04-11"]},
]

var width = 1000,
	height = 196,
	cellSize = 18,
	transCell1 = ((width - cellSize * 53) / 2),
	transCell2 = (height - cellSize * 7 - 1);

var currentYear = new Date().getFullYear()

var id = [...new Set(data.map(function(d) {
	return d.id
}))];

var svg = d3.select("#calendars").selectAll("svg")
	.data(id)
.enter().append("svg")
	.attr("class", "myCalendar")
	.attr("id", d => d)
	.attr("width", width)
	.attr("height", height)
.append("g")
	.attr("transform", 
		"translate(" + transCell1 + "," + transCell2 +")");

var names = svg.append("text")
	.attr("dx", - 5)
	.attr("dy", - 35)
	.attr("font-size", 14)
	.attr("text-anchor", "start")
	.text(function(d) {
		var value = d.split("_")
		return value[0] + " " + value[1]
	});

update(currentYear, id);

function update(year, user) {

	var getDays = function() { 
			return d3.timeDays(
				new Date(year, 0, 1), new Date(year + 1, 0, 1)
			);
		}

	var fillDays = svg.selectAll(".fillDays")
		.data(getDays)

	fillDays.exit().remove()

	fillDays = fillDays
	.enter().append("rect")
		.attr("class", "fillDays")
		.attr("stroke", "#ccc")
		.attr("width", cellSize)
		.attr("height", cellSize)
		.merge(fillDays)
		.attr("x", function(d) { 
			return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
		})
		.attr("y", function(d) { return d.getDay() * cellSize; })
		.datum(d3.timeFormat("%Y-%m-%d"))
		.attr("fill", function(d) {
			var value = new Date(d).getDay();
			var check = (value === 6 || value === 0) // Check if weekend
			if (check) return "#E0E0E0"
			if (d == data[0].dates[0]) return "red" // 
			else return "none"; 
		});

	var days = svg.selectAll(".days")
		.data(getDays)

	days = days
	.enter().append("text")
		.attr("class", "days")
		.attr("font-size", 11)
		.attr("dy", 13)
		.attr("dx", 3)
		.style("pointer-events", "none")
		.attr("fill", "#333")
		.attr("stroke", "none")
		.merge(days)
		.attr("x", function(d) {
			return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
		})
		.attr("y", function(d) { return d.getDay() * cellSize; })
		.text(function(d) {
			return formatDay(d)
		})
	
	var lines = svg.selectAll("path")
		.data(function() { 
			return d3.timeMonths(
				new Date(year, 0, 1), new Date(year + 1, 0, 1)
			); 
		})

	lines.exit().remove()

	lines = lines
	.enter().append("path")
		.attr("fill", "none")
		.attr("stroke", "#000")
		.merge(lines)
		.attr("d", pathMonth);

	//
	// Hardcoded text
	//

	var months = svg.selectAll(".months")
		.data([
			"Jan", "Feb", "Mar", "Apr", "Maj", "Jun", 
			"Jul", "Aug", "Sep", "Okt", "Nov", "Dec"])

	months = months
		.enter()
	.append("text")
		.attr("class", "months")
		.attr("dx", function(d, i) { return i * 80 + 25;})
		.attr("dy", - 6)
		.attr("font-size", 12)
		.attr("fill", "#333")
		.attr("stroke", "none")
		.merge(months)
		.text(d => d)

	var weeks = svg.selectAll(".weeks")
		.data(["Sö", "Må", "Ti", "On", "To", "Fr", "Lö"])

	weeks = weeks
		.enter()
	.append("text")
		.attr("class", "weeks")
		.attr("dy", function(d, i) { return i * 18 + 13;})
		.attr("dx", -22)
		.attr("font-size", 11)
		.attr("fill", "#333")
		.attr("stroke", "none")
		.merge(weeks)
		.text(d => d)
}

d3.selectAll(".year").on("click", function() {
	update(Number(this.value), id)
})

d3.selectAll(".myCalendar").on("click", function() {
	console.log(d3.select(this).property("id"))
})

function pathMonth(t0) {
	var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
		d0 = t0.getDay(), w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
		d1 = t1.getDay(), w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
	return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
		 + "H" + w0 * cellSize + "V" + 7 * cellSize
		 + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
		 + "H" + (w1 + 1) * cellSize + "V" + 0
		 + "H" + (w0 + 1) * cellSize + "Z";
}

body {
	margin: auto;
	width: 1000px;
	font: 12px arial;
}

<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>

<button class="year" value="2017">2017</button>
<button class="year" value="2018">2018</button>
<button class="year" value="2019">2019</button>

<div id="calendars"></div>

Answer 1

关于 your own answer :根据经验，不要在 D3 代码中使用循环。大多数时候它们是不必要的，或者更糟的是，它们可能成为障碍甚至破坏事情。

这里更简单和惯用的解决方案是将数据绑定(bind)到每个 SVG。

首先，不要只用两个字符串绑定(bind)该数组。取而代之的是，绑定(bind)包含日期的 data 数组本身:

var svg = d3.select("#calendars").selectAll("svg")
    .data(data)
    //etc...

然后，只需为矩形中的每个用户获取这些日期...

var userDates = d3.select(this.parentNode).datum().dates;

...并使用 if 来填充它们:

if (userDates.indexOf(d) > -1) return "red";

以下是仅进行了这些更改的代码:

var formatDay = d3.timeFormat("%d");
var formatDate = d3.timeFormat("%Y-%m-%d");

var data = [{
    id: "Some_Name",
    dates: ["2018-01-01", "2018-02-11"]
  },
  {
    id: "Another_Name",
    dates: ["2018-03-01", "2018-04-11"]
  },
]

var width = 1000,
  height = 196,
  cellSize = 18,
  transCell1 = ((width - cellSize * 53) / 2),
  transCell2 = (height - cellSize * 7 - 1);

var currentYear = new Date().getFullYear()

var svg = d3.select("#calendars").selectAll("svg")
  .data(data)
  .enter().append("svg")
  .attr("class", "myCalendar")
  .attr("id", d => d.id)
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform",
    "translate(" + transCell1 + "," + transCell2 + ")");

var names = svg.append("text")
  .attr("dx", -5)
  .attr("dy", -35)
  .attr("font-size", 14)
  .attr("text-anchor", "start")
  .text(function(d) {
    var value = d.id.split("_")
    return value[0] + " " + value[1]
  });

update(currentYear);

function update(year) {

  var getDays = function() {
    return d3.timeDays(
      new Date(year, 0, 1), new Date(year + 1, 0, 1)
    );
  }

  var fillDays = svg.selectAll(".fillDays")
    .data(getDays)

  fillDays.exit().remove()

  fillDays = fillDays
    .enter().append("rect")
    .attr("class", "fillDays")
    .attr("stroke", "#ccc")
    .attr("width", cellSize)
    .attr("height", cellSize)
    .merge(fillDays)
    .attr("x", function(d) {
      return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
    })
    .attr("y", function(d) {
      return d.getDay() * cellSize;
    })
    .datum(d3.timeFormat("%Y-%m-%d"))
    .attr("fill", function(d) {
      var userDates = d3.select(this.parentNode).datum().dates;
      var value = new Date(d).getDay();
      var check = (value === 6 || value === 0) // Check if weekend
      if (check) return "#E0E0E0"
      if (userDates.indexOf(d) > -1) return "red" // 
      else return "none";
    });

  var days = svg.selectAll(".days")
    .data(getDays)

  days = days
    .enter().append("text")
    .attr("class", "days")
    .attr("font-size", 11)
    .attr("dy", 13)
    .attr("dx", 3)
    .style("pointer-events", "none")
    .attr("fill", "#333")
    .attr("stroke", "none")
    .merge(days)
    .attr("x", function(d) {
      return d3.timeWeek.count(d3.timeYear(d), d) * cellSize;
    })
    .attr("y", function(d) {
      return d.getDay() * cellSize;
    })
    .text(function(d) {
      return formatDay(d)
    })

  var lines = svg.selectAll("path")
    .data(function() {
      return d3.timeMonths(
        new Date(year, 0, 1), new Date(year + 1, 0, 1)
      );
    })

  lines.exit().remove()

  lines = lines
    .enter().append("path")
    .attr("fill", "none")
    .attr("stroke", "#000")
    .merge(lines)
    .attr("d", pathMonth);

  //
  // Hardcoded text
  //

  var months = svg.selectAll(".months")
    .data([
      "Jan", "Feb", "Mar", "Apr", "Maj", "Jun",
      "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"
    ])

  months = months
    .enter()
    .append("text")
    .attr("class", "months")
    .attr("dx", function(d, i) {
      return i * 80 + 25;
    })
    .attr("dy", -6)
    .attr("font-size", 12)
    .attr("fill", "#333")
    .attr("stroke", "none")
    .merge(months)
    .text(d => d)

  var weeks = svg.selectAll(".weeks")
    .data(["Sö", "Må", "Ti", "On", "To", "Fr", "Lö"])

  weeks = weeks
    .enter()
    .append("text")
    .attr("class", "weeks")
    .attr("dy", function(d, i) {
      return i * 18 + 13;
    })
    .attr("dx", -22)
    .attr("font-size", 11)
    .attr("fill", "#333")
    .attr("stroke", "none")
    .merge(weeks)
    .text(d => d)
}

d3.selectAll(".year").on("click", function() {
  update(Number(this.value))
})

d3.selectAll(".myCalendar").on("click", function() {
  console.log(d3.select(this).property("id"))
})

function pathMonth(t0) {
  var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
    d0 = t0.getDay(),
    w0 = d3.timeWeek.count(d3.timeYear(t0), t0),
    d1 = t1.getDay(),
    w1 = d3.timeWeek.count(d3.timeYear(t1), t1);
  return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize +
    "H" + w0 * cellSize + "V" + 7 * cellSize +
    "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize +
    "H" + (w1 + 1) * cellSize + "V" + 0 +
    "H" + (w0 + 1) * cellSize + "Z";
}

body {
  margin: auto;
  width: 1000px;
  font: 12px arial;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<button class="year" value="2017">2017</button>
<button class="year" value="2018">2018</button>
<button class="year" value="2019">2019</button>
<div id="calendars"></div>