chart = { const Label = "Wavelength (nm)"; const marginTop = 30; // top margin, in pixels const marginRight = 20; // right margin, in pixels const marginBottom = 20; // bottom margin, in pixels const marginLeft = 30; // left margin, in pixels const strokeWidth = 1.5; // stroke width of line // 新的值 const X = d3.map(data, (d) => d.X); console.log("x in chart", X); const Y = d3.map(data, (d) => d.Y); const Z = d3.map(data, (d) => d.Sample); const O = d3.map(data, (d) => d); // let minX = d3.min(X) // let maxX = d3.max(X) let selectedSample; let D = d3.map(data, (d, i) => !isNaN(X[i]) && !isNaN(Y[i])); // 该对象是否 X 和 Y 是否都不是 NaN console.log("D", D); // Compute default domains, and unique the z-domain. // x and y domain const xDomain = d3.extent(X); const yDomain = d3.extent(Y); console.log("yDomain in chart", yDomain); const zDomain = new d3.InternSet(Z); console.log("zDomain", zDomain); console.log("Z", Z); // I 是一个数组，里面装的是索引。 const I = d3.range(X.length).filter((i) => zDomain.has(Z[i])); console.log("I", I); let subject, dx, dy; // 最近的点，需要进行拖动，以及将 dot 画在这个地方。 // dx 和 dy 是一个相对距离。 // 图例颜色 const color = d3.scaleOrdinal(zDomain, d3.schemeTableau10); // Omit any data not present in the z-domain. // 省略z-domain 中没有的任何数据。 // x 比例尺 const xScale = d3.scaleLinear(xDomain, [marginLeft, width - marginRight]); // y 比例尺 const yScale = d3.scaleLinear(yDomain, [height - marginBottom, marginTop]); // x 轴 const xAxis = d3 .axisBottom(xScale) .ticks(width / 40) .tickSizeOuter(0); // y 轴 const yAxis = d3.axisLeft(yScale).ticks(height / 30); console.log("yAxis", yAxis); // Compute titles. const T = Z; // T = Z = ["sample 1", ...] // 选择模型 const selmodel = SelectionModel(zDomain); // 以 X 属性分组 const groups = d3.group(data, (d) => d.X); console.log("groups", groups); // line 生成器生成 path d属性的值 const line = d3 .line() .defined((d, i) => { // console.log("d", d); // console.log("i", i); // 这里传递进来的就是一个索引数组 return D[d]; }) // 只需要不是 NaN 的 .curve(d3.curveLinear) .x((d, i) => xScale(X[d])) .y((d, i) => yScale(Y[d])); // 构造一个 svg 容器。 const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") // svg 事件绑定 // 光标进入事件 .on("pointerenter", pointerentered) // 光标移动 .on("pointermove", pointermoved) // .on("pointermove", (event) => { // pointermoved(); // return subjectDrag({ sourceEvent: event }); // }) //.on("mousemove", (event) => subjectDrag({ sourceEvent: event })) .on("pointerleave", pointerleft) .on("click", pointclicked) .on("touchstart", (event) => event.preventDefault()); //---------------- function getSubject(event) { const I1 = selected.locked ? I.filter((i) => Z[i] === selected.locked) : I.filter((i) => selmodel.has(Z[i])); // I1 是过滤出来 selected 的折线图。 // 或者是所有 selmodel 里面选定了的东西。过滤出来。 // I1 也是一个索引。去 X 和 Y 这两个大数组中拿东西。 console.log("event in get Subject", event); const [xm, ym] = d3.pointer(event); const i = d3.least( // 这个 i 其实就是最近的 subject 的 X 和 Y 数据的索引，需要修改数据的时候，就可以从这里去访问 X 和 Y 来修改。 // 后续如果，需要做撤销修改，那么可以做一个历史数据栈，保存对应的 X轴的 domain 数组和这个 subject 的索引。 I1, (idx) => Math.hypot(xScale(X[idx]) - xm, yScale(Y[idx]) - ym) // Math.hypot() 函数返回所有参数的平方和的平方根 // Math.hypot(3,4) = 5 ); // closest point return [I1, i]; } function subjectDrag(event) { const [, i] = getSubject(event); // X[i] Y[i] 就是我们需要修改的数据。 console.log("in subjectDrag event", event); // const p = d3.pointer(event, svg.node()); // 鼠标指针的位置 // p 是一个数组，[x1,y1] 类似这样的。 // points 是 start control end 三个点的一个数组 // xScale(X[i]) svg 像素的 range 的 x 值 const subject_domain = [X[i], Y[i]]; // 升序排序返回较小的那个，这个是我们需要修改的数据。 const subject_range = [xScale(X[i]), yScale(Y[i])]; subject = i; if (subject_domain) { d3.select(svg.node()).style("cursor", "hand").style("cursor", "grab"); console.log(subject_domain, "dragsubject subject_domain event"); } else { d3.select(svg.node()).style("cursor", null); } return subject_domain; } // 添加拖动功能 d3.select(svg.node()).call( d3 .drag() .subject(subjectDrag) .on("start", (event) => { console.log("drag start event", event.x, event.y); console.log(subject, "subject start event"); dy = yScale(Y[subject]) - event.y; return event; }) .on("drag", (event) => { console.log("draging event", event.x, event.y); console.log(subject, "subject drag event"); Y[subject] = yScale.invert(event.y + dy); path .attr("d", ([, I]) => line(I)) .attr("stroke", (d) => { console.log("d color", d); // d 是一个数组 d[0] 是 sample 4 这样的名字。 return selmodel.has(d[0]) ? color(d[0]) : "transparent"; }); return event; }) .on("end", (event) => { d3.select(svg.node()).style("cursor", "grab"); console.log(subject, "subject end event"); console.log("drag end event", event.x, event.y); }) ); // ----------------------- // 比较线也就是那条竖线 const compareLine = svg.append("g"); compareLine .append("line") .attr("y1", marginTop) .attr("y2", height - marginBottom + 5) .attr("stroke", "currentColor"); // 竖线底部的 label 文字，这里仅仅放了一个数字 const ruleLabel = compareLine .append("text") .attr("y", height - marginBottom - 5) .attr("x", 18) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle"); // .attr("dy", "1em"); // 画 x 轴刻度轴 const xg = svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call((g) => g .append("text") .attr("x", width / 2 - 50) .attr("y", 28) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(Label) ); const yLineGrid = (g) => { let ticks = g.selectAll("g.tick").data(xScale.ticks(width / 40), (d) => d); ticks.attr("class", "tick xtick"); ticks.join( (enter) => enter, (update) => { // update 代表的是单个 g.tick update.each(function (d, i, group) { const gtick = d3.select(this); const grids = gtick.selectAll(".grid"); if (grids._groups[0].length === 0) { gtick .append("line") .attr("y2", -250) .attr("stroke-opacity", 0.1) .attr("stroke", "currentColor") .attr("class", "update-grid grid ygrid"); } // this 代表的是 group[i] // i 是索引 // console.log("d", d); // console.log("i", i); }); return update; }, (exit) => exit.remove() ); return ticks; }; const xLineGrid = (g) => { let ticks = g.selectAll("g.tick").data(yScale.ticks(height / 30), (d) => d); ticks.attr("class", "tick ytick"); ticks.join( (enter) => enter, (update) => { // update 代表的是单个 g.tick update.each(function (d, i, group) { const gtick = d3.select(this); const grids = gtick.selectAll(".grid"); console.log("each .grid", grids._groups[0].length === 0); if (grids._groups[0].length === 0) { gtick .append("line") .attr("x2", width - 50) .attr("stroke-opacity", 0.1) .attr("stroke", "currentColor") .attr("class", "update-grid grid xgrid"); } // this 代表的是 group[i] // i 是索引 // console.log("d", d); // console.log("i", i); }); return update; }, (exit) => exit.remove() ); return ticks; }; // 画 y 轴刻度轴 const yg = svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) //.call(g => g.select(".domain").remove()) .call(xLineGrid) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") ); // 画折线图 const groupbySample = d3.group(I, (i) => Z[i]); console.log("groupbySample", groupbySample); const path = svg .append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-width", strokeWidth) // 添加 path .selectAll("path") .data(groupbySample) // 根据 sample 1 sample x 这样的内容来进行分类 .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", typeof color === "function" ? ([d]) => color(d) : null) // d 是前面的 groupbySample 中的一个。比如 sample 1 // 使用 line 生成器 .attr("d", ([, I]) => { console.log("I in line generator", I); // I 是一个索引数组 // 进入到 line 生成器之后，将会使用这个索引去访问数据，生成对应的 d 属性 return line(I); }) .attr("stroke", (d) => { console.log("d in line stroke attr", d); // d 分组后的map 转换成为了数组 // d[0] 是 Sample 1 这样的东西。 // 这里是只需要在选择模型的 domain 中的内容 return selmodel.has(d[0]) ? color(d[0]) : "transparent"; }); // change.chart 事件 selmodel.on("change.chart", (value) => { path.attr("stroke", (d) => selmodel.has(d[0]) ? color(d[0]) : "transparent" ); }); // 画出竖线上面的小点 const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); dot .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("x", 75) .attr("y", -8); // 一些事件回调函数 // 鼠标点击 handler function pointclicked(event) { console.log(event, "event clicked"); if (!selected.locked) { selected.locked = selectedSample; // selectedSample 选中的样本被锁定 // svg.selectAll(".shapes").remove() // selected.comments = commentsData.get(selectedSample) // if (selected.comments) { // svg.selectAll(".shapes") // .data(selected.comments) // .enter() // .append('g').attr("class", "shapes") // .attr("transform", (d, i) => `translate(${xScale(d.X)}, ${yScale(d.Y)})`) // .call(g => g.append('path') // .attr("d", function(d) {return d3.symbol().type(d3.symbolTriangle).size("30")()}) // .attr("fill", "red")) // .call(g => g.append("text") // .attr("y", -2) // .attr("x", 3) // .attr("font-family", "sans-serif") // .attr("font-size", 11) // .text(d => `(${d.X}:${d.Y.toFixed(2)})${d.Comment}`)) // } } else { selected.locked = ""; // svg.selectAll(".shapes").remove() } } // 光标移动 handler function pointermoved(event) { // 获取到事件触发的坐标点 const [xm, ym] = d3.pointer(event); console.log("xm", xm); console.log("ym", ym); const [I1, i] = getSubject(event); console.log(I1, i); // 设置选中的样本，指的是选中的折线图，而不是图例。 selectedSample = Z[i]; console.log("selectedSample", selectedSample); // 设置折线图的样式将在 selmodel 中的设置成灰色 // 不存在 selmodel 中的设置为透明 path .style("stroke", ([z, group_data]) => { // 这里的参数是一个数组，数组中的结构是 ["Sample 1", [some_index]] // 也就是之前的分组数据。 return Z[i] === z ? null : selmodel.has(z) ? "#ddd" : "transparent"; }) .filter(([z]) => Z[i] === z) .raise(); // raise 是为了让 selection 元素到前面来，可能我们希望某个元素到最上面来，而不要被其他元素所遮挡。 // ❗️把点的位置移动到对应的标尺的位置坐标，如果需要实现拖动，那么我们需要改变的是 X 和 Y 中的数据。 dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); // X[i] 是一个 domain 范围的数据值 // xScale(X[i]) 是一个 svg 的显示的像素位置的 x 坐标。 // 比较线的位置以及点的位置。 compareLine.attr("transform", `translate(${xScale(X[i])},0)`).raise(); if (T) { // T 是一个数组类似 ["Sample 1", "Sample 2"] 这样的东西。 // 更新 dot 边上的文字 // 以及 label dot.select("text").text(`${T[i]}:(${Y[i]})`); ruleLabel.text(`${X[i]}`); } const details = groups.get(X[i]).filter((d) => selmodel.has(d.Sample)); console.log(groups, "groups"); // details 是分组取出，并且过滤出在 selmodel 中存在的 Sample 的数组。 // X轴上 x 相同的 8个 Sample 的 X Y 的数据。 console.log(details, "details"); // 更新 detail 卡片 d3.select("#chartwavelength").html(X[i]); d3.select("#chartdetail").html( details .map( (item) => `

${ item.Sample }

${item.Y.toFixed( 2 )}

` ) .join("") ); } // 光标进入 handler function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } // 光标离开 handler function pointerleft() { selected.locked = ""; path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); compareLine.attr("transform", `translate(-40,0)`); svg.selectAll(".shapes").remove(); } // 对象返回 // scales.color // scales.selmodel return Object.assign(svg.node(), { scales: { color, selmodel }, // chart 更新函数。 update(focusX, focusY) { // focusX 和 Y // 是上方 Focus 那个图的一个 x 和 y 的 domain。 const [minX, maxX] = focusX; const [minY, maxY] = focusY; // svg.selectAll(".tick line").remove() // 更新值的范围。 xScale.domain(focusX); yScale.domain(focusY); console.log("yScale ticks", yScale.ticks(height / 30)); // 更新轴刻度以及网格。 xg.call(xAxis).call(yLineGrid); yg.call(yAxis).call(xLineGrid); D = d3.map(D, (d, i) => X[i] >= minX && X[i] <= maxX); // 更新折线图 path .attr("d", ([, I]) => line(I)) .attr("stroke", (d) => selmodel.has(d[0]) ? color(d[0]) : "transparent" ); // 更新 card 展示牌 const maxIndex = d3.maxIndex(data, (d) => minX <= d.X && d.X <= maxX ? d.Y : NaN ); const minIndex = d3.minIndex(data, (d) => minX <= d.X && d.X <= maxX ? d.Y : NaN ); d3.select("#rangewavelength").html( `[${minX.toFixed(2)}, ${maxX.toFixed(2)}]` ); d3.select("#rangemax").html(`${Z[maxIndex]}: ${maxY.toFixed(2)}`); d3.select("#rangemin").html(`${Z[minIndex]}: ${minY.toFixed(2)}`); } }); }