3f:null 40:["$","title",null,{"children":"Interactive legend | onepisya | Observable"}] 46:T429,detail = html`

Wavelength(nm):

Range(nm):

[234.5, 456.7]

Min:

Sample1: 12.44

Max:

Sample5: 2.44

`47:T680,htl.html`

`48:Tda8,viewof focus = { const marginTop = 20; // top margin, in pixels const marginRight = 30; // right margin, in pixels const marginBottom = 30; // bottom margin, in pixels const marginLeft = 20; // left margin, in pixels const focusHeight = 100; const strokeWidth = 1; // svg 创建 const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); // brush 可选择筛选。 const brush = d3 .brushX() .extent([ [marginLeft, 0.5], [width - marginRight, focusHeight - marginBottom - 1] ]) // 设置可拖动的在 svg 上的位置范围 // brush.extent([[x0, y0], [x1, y1]]) // x0,y0 是左上， x1,y1 是右下。 .on("brush", brushed) // 事件绑定。 .on("end", brushended); // 结束。 const X = d3.map(data, (d) => d.X); const Y = d3.map(data, (d) => d.Y); const Z = d3.map(data, (d) => d.Sample); // Sample const zDomain = new d3.InternSet(Z); // 去重 const I = d3.range(X.length).filter((i) => zDomain.has(Z[i])); const color = d3.scaleOrdinal(zDomain, d3.schemeTableau10); // legend 颜色设置。 // x 比例尺 const xScale = d3.scaleLinear(d3.extent(X), [ marginLeft, width - marginRight ]); // y 比例尺 const yScale = d3.scaleLinear( [d3.min(Y) - 1, d3.max(Y)], [focusHeight - marginBottom, marginTop] ); // X 轴 const xAxis = d3 .axisBottom(xScale) .ticks(width / 80) .tickSizeOuter(0); const D = d3.map(data, (d, i) => !isNaN(X[i]) && !isNaN(Y[i])); const defaultSelection = [xScale(d3.min(X)), xScale(d3.max(X))]; console.log(defaultSelection); // line 折线生成器 const line = d3 .line() .defined((i) => D[i]) .curve(d3.curveLinear) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); // 添加 x 轴 svg .append("g") .attr("transform", `translate(0,${focusHeight - marginBottom})`) .call(xAxis); // 画出折线。 svg .append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-width", strokeWidth) .selectAll("path") .data(d3.group(I, (i) => Z[i])) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); // 添加 brush 的那个滑块。 const gb = svg.append("g").call(brush).call(brush.move, defaultSelection); // handler function brushed({ selection }) { if (selection) { // selection 是 svg 的选中的像素范围 [x,y] console.log(selection, "brush of selection"); // const selectionmap = selection.map(xScale.invert, xScale) // const [minX, maxX] = selectionmap; // 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); // console.log(Z[minIndex], Z[maxIndex]) svg.property("value", selection.map(xScale.invert, xScale)); // 设置值。这个 value 就是对应的 domain 的范围。 // scale 是 doamin 和 range 之间的映射 // 将刻度上的范围返回，而不是像素值。 svg.dispatch("input"); } } // handler brush 结束。 function brushended({ selection }) { console.log(selection, "brush end of selection"); if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }49:T4003,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)}`); } }); }4a:Tcb1,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches( color, selmodel, { columns = null, format, unknown: formatUnknown, swatchSize = 12, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {} ) { // 比初始的没有 selmedel 的时候多了一个参数。 const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = (x) => (x === unknown ? formatUnknown : x); function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } // 新增的 selmodel 需要使用的代码 function changeColor(doms) { doms._groups[0].forEach((d) => (d.style["--color"] = "#ccc")); } function calColor(value) { return selmodel.has(value) ? color(value) : "#ccc"; } // change 事件 selmodel.on("change", function (value) { console.log(value, "legend is toggle by change event"); console.log(this, "this api"); const showColor = selmodel.has(value); d3.select(`[data-legend = "${value}"]`).style( "--color", showColor ? color(value) : "#ccc" ); // .style('color', showColor ? '' : '#ccc') }); if (columns !== null) return htl.html`

${domain.map((value) => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; // colmns === null 的时候应用下面的模板 return htl.html`

${domain.map( (value) => htl.html`${format(value)}` )}

`; }4b:T63c,// Our selection model wraps two components: // - A JavaScript Set for tracking the selected elements // - A D3 dispatch helper for registering and invoking listener callbacks upon changes function SelectionModel(domain) { const dispatch = d3.dispatch("change"); // 创建一个内部的事件分发器。 //const state = new Set(domain); console.log( "aaaaaaaaaaaaaaaaaaaaaaa1333", selected, selected.domains, selected.domains.size ); if (!selected.domains.size) { selected.domains = domain; } const api = { on: (type, fn) => (dispatch.on(type, fn), api), // return 返回的是 api 这个东西 // clear: () => (clear(), api), has: (value) => { return selected.domains.has(value); }, // set: value => (update(value, true), api), toggle: (e) => (update(e.target.dataset.legend), api) // return 返回的是 api 这个东西 }; // function clear() { // if (state.size) { // state.clear(); // dispatch.call('change', api, api); // } // } // 更新函数 function update(value) { if (!selected.domains.has(value)) { selected.domains.add(value); // 获取一个图例的名字类似 label // 如果没有就添加 } else { // 如果有就删除 selected.domains.delete(value); } // 事件分发器调用，"change" 的回调函数的 this 指向 api ，参数是 value // 调用 change 的回调函数 dispatch.call("change", api, value); console.log("selected", selected); console.log("dispatch.call"); } return api; }4c:[{"id":"22d9ba1b04cff137d09b4dc4eea819cbe79e10e706652072081a3865158f005defcb123ea15b7e64c487ceff6ef85f7c1a888f28c3448c7b4998b9396c026e3b","href":"https://static.observableusercontent.com/files/22d9ba1b04cff137d09b4dc4eea819cbe79e10e706652072081a3865158f005defcb123ea15b7e64c487ceff6ef85f7c1a888f28c3448c7b4998b9396c026e3b","name":"all-2","type":"application/octet-stream","lastModified":1661092181791.928,"size":127778}] 44:{"id":"3d8087826def0a08","slug":"interactive-legend","title":"Interactive legend","thumbnail":"bf31cf6ba1b620b739426fcd683b5b2c6236e9b66084bc26aef7325e3b352871","access_level":"public","create_time":"$D2022-08-21T14:29:41.791Z","update_time":"$D2022-09-29T07:53:41.824Z","view_time":null,"first_public_time":"$D2022-08-23T05:11:16.356Z","has_unpublished_edits":null,"fork":{"id":"f07d831cd2deb902","slug":"interactive-legend","title":"Interactive legend","owner":{"id":"e51e6f542965cded","login":"294bb65f21bfa9db","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":1971,"publish_version":1971,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"Interactive legend","cells":[{"id":0,"value":"# Interactive legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"## data-SpectrumData","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"SpectrumData = FileAttachment(\"all-2\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"## parseData","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"function parseData(data){\n let result = []\n SpectrumData.forEach(item => item.DataJson.Spectrum.SmoothedPoints.forEach(point => {\n result.push(Object.assign({Sample: item.SampleName}, point))\n }))\n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"## d3.schemeCategory10","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1053,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"## detail","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"## data = parseData(SpectrumData)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"data = parseData(SpectrumData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"// comments = [{Sample: \"Sample 1\", X: 260.5, Y: 5.876316038916, Comment: 'The value is over what is expected1'}, {Sample: \"Sample 1\", X: 315, Y: 0.828, Comment: 'The value is over what is expected2'}, {Sample: \"Sample 5\", X: 270.5, Y: 6.41477403271725, Comment: 'The value is over what is expected3'}, {Sample: \"Sample 6\", X: 280, Y: 9.27261250026078, Comment: 'The value is over what is expected4'}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"// commentsData = d3.group(comments, d => d.Sample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"// selected = ({domains: new Set(), locked: ''})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"## selected","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1127,"value":"new d3.InternSet(d3.map(SpectrumData, d => d.SampleName))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"d3.map(SpectrumData, d => d.SampleName)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"selected = {\n console.log('ssssssssssssssssssssssssssssss')\n return {\n domains: new d3.InternSet(d3.map(SpectrumData, d => d.SampleName)),\n locked: ''\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"chart.scales.color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"htl.html`\nonepisya\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"\nhtl.html`\nonepisya\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"chart.scales.selmodel","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"legendNoInteraction = Swatches(chart.scales.color, chart.scales.selmodel, {\n columns: \"180px\"\n})\n// 没有交互点击","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"## legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1294,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"legend = Swatches(chart.scales.color, chart.scales.selmodel)\n// 有交互点击","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"## focus and Brush","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1834,"value":"md`x 轴的可用 domain 范围`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"focus","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"// // 仅用于调试\n// chart_yAxis_debug = {\n// yScale.domain(update);\n\n// return htl.html`\n// \n// `;\n// }\n1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"htl.html`${chart}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"这里是会自动更新的，然后再调用 cahrt.update\n\n返回的其实是 y 轴的 domain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1335,"value":"update = {\n const [minX, maxX] = focus;\n const maxY = d3.max(data, (d) => (minX <= d.X && d.X <= maxX ? d.Y : NaN));\n const minY = d3.min(data, (d) => (minX <= d.X && d.X <= maxX ? d.Y : NaN));\n chart.update(focus, [minY, maxY]);\n return [minY, maxY];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"## chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1961,"value":"height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"Y = d3.map(data, (d) => d.Y);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"marginTop = 20; // top margin, in pixels","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"marginBottom = 30; // bottom margin, in pixels","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"yDomain = d3.extent(Y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"yScale = d3.scaleLinear(yDomain, [height - marginBottom, marginTop])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"yAxis = d3\n .axisLeft(yScale)\n .ticks(height / 30)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1963,"value":"yScale(16)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"// 这里仅仅用于调试观察\n_ydomain = {\n yScale.domain(update);\n return yScale.domain();\n // 主动设置，变更 domain\n //yScale.domain()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"yScale.ticks(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"## 交互式折线图代码","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"d3.maxIndex(data, (d) => console.log(d) || 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1848,"value":"现在想要拖动点将数据进行修改，然后在拖动的时候调用 chart.update\n另外需要将拖动限制在范围内，所以 chart.update 里面的一些 domain 的范围是不会变更的。\n\n我仅仅需要将值进行变更。(另外这个其实只是一个 y 轴的数值变换，x轴我们预期永远都是连续的时间数据，没有必要进行修改。)\n\n那么实现的方案可以是，在 drag 的事件中将某条线选中后，可以拖动对应 y 值。然后调用类似与 chart.update 的函数，更新视图即可。\n\n*在这之前需要有一个描点（需要它的坐标），拖动的时候，改变*\n\n目前的想法是考虑在 pointerdown and up 事件上做点事情。\n\n给 svg 做一个 drag 然后绑定事件 \n- start 给到一个手型，表示可以拖动。计算偏移量 dx dy\n- drag 的时候使用偏移量加上坐标，得出新的坐标。\n- end 事件将样式 class 改回悬浮的时候的手型。\n- start.render drag.render end.render 的时候进行视图的更新。\n\n最关键的地方在于，出发事件的时候操作对应的那个点以及修改对应的数据。\n也就是说除非那个点的坐标是原数据的引用，不然修改之后还要做同步。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1135,"value":"## Swatches","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"## SelectionModel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1163,"value":"SelectionModel().on","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"SelectionModel().has","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1758,"value":"## Draggable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1774,"value":"delay = 110","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"throttle = _.throttle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 45:"$44:body"