D3, Observable备忘2

html标签嵌入svg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

html`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif;">
  <g fill="steelblue">
    ${fruits.map(d => svg`<rect y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
  </g>
  <g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
    ${fruits.map(d => svg`<text y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.count}</text>`)}
  </g>
  ${d3.select(svg`<g transform="translate(0,${margin.top})">`)
    .call(d3.axisTop(x))
    .call(g => g.select(".domain").remove())
    .node()}
  ${d3.select(svg`<g transform="translate(${margin.left},0)">`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())
    .node()}
</svg>`

• 引入外面变量${width}
• 遍历嵌入svg标签

1
2
3

<g fill="steelblue">
    ${fruits.map(d => svg`<rect y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
</g>

对应

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<g fill="steelblue">
    <rect y="24" x="30" width="610" height="20"></rect>
    <rect y="46" x="30" width="378" height="20"></rect>
    <rect y="68" x="30" width="232" height="20"></rect>
    <rect y="90" x="30" width="145" height="20"></rect>
    <rect y="112" x="30" width="87" height="20"></rect>
    <rect y="134" x="30" width="58" height="20"></rect>
    <rect y="156" x="30" width="29" height="20"></rect>
    <rect y="178" x="30" width="29" height="20"></rect>
</g>

• 遍历显示字符

  1 2 3

  <g fill="white" text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})"> ${fruits.map(d => svg`<text y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.count}</text>`)} </g>

  • text-anchor="end"尾部对齐
  • translate(-6,${y.bandwidth() / 2})相对于字符坐标左上角再平移的值

• 生成x比例尺

  1 2 3 4

  ${d3.select(svg`<g transform="translate(0,${margin.top})">`) .call(d3.axisTop(x)) .call(g => g.select(".domain").remove()) .node()}

  • svg`<g transform="translate(0,${margin.top})">表示先建立一个svg标签对象，再输入d3.select

链式写法

1
2
3
4

d3.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateRound)

相当于

1
2
3
4
5
6
7

{
  const x = d3.scaleLinear();
  x.domain([0, d3.max(fruits, d => d.count)]);
  x.range([margin.left, width - margin.right]);
  x.interpolate(d3.interpolateRound);
  return x;
}

比例尺值范围和像素范围

1
2

x.domain()  // 值范围
x.range()   // 像素范围

• 比例尺用于将值转换成对应的像素坐标x(21)=640

画一个示意图

• 生成的图形请参见https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

{
  const margin = ({top: 30, right: 30, bottom: 30, left: 30});
  const barId = DOM.uid("bar");
  const arrowId = DOM.uid("arrow");
  return svg`<svg viewBox="0 0 ${width} ${height}" style="max-width: ${width}px; font: 10px sans-serif; overflow: visible;">
  <defs>
    <marker id="${barId.id}" viewBox="-5 -5 10 10" markerWidth="60" markerHeight="60" orient="auto"> // 定义线段尾部短线
      <path fill="none" stroke="black" stroke-width="1.5" d="M0,5v-10"></path>
    </marker>
    <marker id="${arrowId.id}" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto"> // 定义线段头部箭头
      <path d="M0,0L10,5L0,10z"></path>
    </marker>
  </defs>
  <rect fill="none" stroke="#000" stroke-dasharray="1,2" width="${width}" height="${height}"></rect> // 最外侧虚线框
  <rect fill="#eee" stroke="#000" x="${margin.left}" y="${margin.top}" width="${width - margin.left - margin.right}" height="${height - margin.top - margin.bottom}"></rect> // 内部框

  <g fill="none" stroke="#000" marker-start="${barId}" marker-end="${arrowId}"> // 定义4条带首尾形状的线段
    <path d="M0,${height / 2}h${margin.left}"></path>
    <path d="M${width},${height / 2}h${-margin.right}"></path>
    <path d="M${width / 2},0v${margin.top}"></path>
    <path d="M${width / 2},${height}v${-margin.bottom}"></path>
  </g>

  <circle r="2.5"></circle> // 左上角小圆点

  <text x="${margin.left + 6}" y="${height / 2}" dy="0.35em">margin.left</text>
  <text x="${width - margin.right - 6}" y="${height / 2}" dy="0.35em" text-anchor="end">margin.right</text>
  <text x="${width / 2}" y="${margin.top + 6}" dy="0.71em" text-anchor="middle">margin.top</text>
  <text x="${width / 2}" y="${height - margin.bottom - 6}" text-anchor="middle">margin.bottom</text>

  <text x="6" dy="0.35em" fill="none" stroke="white" stroke-linejoin="round" stroke-width="4">origin</text> // 左上角框线清空为背景色
  <text x="6" dy="0.35em">origin</text> // 左上角字符

  ${d3.create("svg:g")
    .call(d3.axisTop(x.copy().range([margin.left, width - margin.right])))
    .call(g => g.select(".domain").remove())
    .attr("transform", `translate(0,${margin.top})`)
    .node()}

  ${d3.create("svg:g")
    .call(d3.axisLeft(y.copy().range([margin.top, height - margin.bottom])))
    .call(g => g.select(".domain").remove())
    .attr("transform", `translate(${margin.left},0)`)
    .node()}
</svg>`;
}

定义一个范围选择框

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

viewof count = {
  const form = html`<form style="font: 12px var(--sans-serif); display: flex; align-items: center; min-height: 33px;">
  <label style="display: block;">
    <input name="input" type="range" min="0" max="21" value="12" step="1" style="width: 180px;">
    count = <output name="output"></output>
  </label>
</form>`;
  form.oninput = () => form.output.value = form.value = form.input.valueAsNumber; // 各种赋值
  form.oninput(); // 这行为了首次显示有值
  return form;
}

一个随值实时变化的条形图

1
2
3
4

html`<svg viewBox="0 0 ${width} 33" style="max-width: ${width}px; font: 10px sans-serif; display: block;">
  <rect fill="steelblue" x="${x(0)}" width="${x(count) - x(0)}" height="33"></rect>
  <text fill="white" text-anchor="end" x="${x(count)}" dx="-6" dy="21">${count}</text>
</svg>`

生成一个颜色渐变比例尺

1
2
3

color = d3.scaleSequential()
    .domain([0, d3.max(fruits, d => d.count)])
    .interpolator(d3.interpolateBlues)

颜色渐变图例

1

legend({color, title: "Number of fruit"})

颜色随数值变化的条形图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

html`<svg viewBox="0 ${margin.top} ${width} ${height - margin.top}" style="max-width: ${width}px; font: 10px sans-serif;">
  <g>
    ${fruits.map(d => svg`<rect fill="${color(d.count)}" y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
  </g>
  <g text-anchor="end" transform="translate(-6,${y.bandwidth() / 2})">
    ${fruits.map(d => svg`<text fill="${d3.lab(color(d.count)).l < 60 ? "white" : "black"}" y="${y(d.name)}" x="${x(d.count)}" dy="0.35em">${d.count}</text>`)}
  </g>
  ${d3.select(svg`<g transform="translate(${margin.left},0)">`)
    .call(d3.axisLeft(y))
    .call(g => g.select(".domain").remove())
    .node()}
</svg>`

时间日期比例尺

1
2
3

x = d3.scaleUtc()
    .domain(d3.extent(data, d => d.date))
    .range([margin.left, width - margin.right])

比例尺绘制函数

1
2
3

xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).ticks(width / 60).tickSizeOuter(0))

Path指令

• Mx,y - 移至指定点 [x, y]
• Lx,y - 画线到指定点 [x, y]
• hx - 画一条长度为x的水平线
• vy - 画一条长度为y的垂直线
• z - 画线连接起点

  生成path指令串

  有两种搞法，都可以生成

  1

  "M40,177.39579502267992L40.48893805309735,176.9415839156553L40.977876106194685,177.1308385435822L41.466814159292035,177.77139266887337L41.955752212389385,176.91829103837193L43.91150442477876,176.7057435331617L44.400442477876105,175.41881206325854L44.889380530973455,174.71420252543825L45.86725663716815,175.52654162069388L47.33407079646018,174.67343999019246L47.82300884955752,174.28328429569692L48.31194690265487,174.00085815863673L48.80088495575221,173.87565894323896L49.28982300884956,173.75337133750156L50.26769911504425,175.00536349147967L50.756637168141594,174.95004290793182L51.24557522123894,175.78858649013117L51.73451327433628,175.42463528257937L52.22345132743363,174.91510359200686L53.690265486725664,173.57867475787666L54.179203539823014,173.99503493931593L54.66814159292035,174.60938457766338L55.1570796460177,173.92515630746598L55.646017699115035,174.18720117690327L57.11283185840708,174.37936741449064L57.60176991150443,175.16259041314208L58.09070796460177,174.51038984920928L58.57964601769912,174.89763393404436L59.06858407079646,174.46671570430306L61.024336283185846,174.69382125781536L61.51327433628319,172.97305994851047L62.491150442477874,171.34838175799925L62.98008849557522,171.4794041927179L64.44690265486726,172.05299129581954L64.44690265486726,171.46484614441582L64.9358407079646,171.45319970577418L65.42477876106194,170.96404928282456L65.9137168141593,169.8984001471129L67.38053097345133,169.79067058967757L67.86946902654867,169.554830207184L68.35840707964601,169.78484737035674L68.84734513274337,169.23746475419887L69.3362831858407,168.14561113154346L70.80309734513274,168.16016917984552L71.29203539823008,170.7252972906706L71.78097345132744,170.0352458011524L72.26991150442478,167.49049895795025L72.75884955752213,168.1164950349393L74.22566371681415,168.82110457275957L74.7146017699115,171.63663111438026L75.6924778761062,170.69326958440604L76.18141592920354,170.25943974500427L76.6703539823009,171.61042662743657L78.13716814159292,170.62047934289566L78.62610619469027,170.6845347554248L79.11504424778761,170.98151894078705L79.60398230088495,173.2001655020228L79.60398230088495,173.6048792448204L81.070796460177,172.7925401495648L81.55973451327432,173.8873053818806L82.04867256637168,175.08980017163174L82.53761061946904,175.91960892484983L83.02654867256638,174.46089248498222L84.4933628318584,174.4143067304156L84.98230088495575,172.8565955620939L85.47123893805309,171.4182603898492L85.96017699115043,171.83753218094887L86.44911504424779,170.6059212945936L87.91592920353982,171.49396224102L88.40486725663717,173.07496628662497L88.89380530973452,170.96113767316416L89.38274336283186,170.32931837685422L89.8716814159292,169.68002942258184L92.31637168141593,168.02623513546646L92.80530973451327,170.1808262841731L93.29424778761063,170.6903579747456L93.78318584070797,171.63371950471986L94.76106194690266,170.1953843324752L95.25,170.55060071104572L95.73893805309734,170.15462179722937L96.22787610619469,170.05271545911486L96.71681415929203,169.58394630378817L98.18362831858408,169.70041069020473L98.67256637168143,168.96959666544072L99.16150442477877,169.01327081034694L99.6504424778761,169.147204854726L100.13938053097345,168.0291467451269L101.60619469026548,166.82665195537575L102.09513274336283,165.39996322177274L102.58407079646017,165.5193392178497L103.07300884955751,165.01563074659802L103.56194690265487,165.31552654162067L105.51769911504425,164.47989456908175L106.0066371681416,163.86554493073433L106.49557522123894,164.01986024273629L106.98451327433628,164.5090106656859L107.47345132743362,162.99206203261002L108.94026548672566,161.11116219198234L109.42920353982302,161.12572024028444L109.42920353982302,161.43726247394875L109.91814159292036,162.76495647909772L110.40707964601769,161.3033284295697L111.87389380530973,161.38194189040087L112.36283185840708,160.62492337869315L112.85176991150443,159.7019431163418L113.34070796460178,159.4835723918107L113.82964601769913,160.38034816721836L115.29646017699113,159.23317396101507L115.78539823008849,155.79747456172615L116.27433628318585,155.86444158391566L116.76327433628319,156.78159862694616L117.25221238938053,156.2225695721466L118.71902654867256,156.10901679539046L119.2079646017699,155.55289935025132L119.69690265486726,154.69397450042908L120.67477876106196,155.4247885251931L121.1637168141593,155.29958930979527L122.63053097345133,155.7916513424053L123.11946902654867,154.15823832291284L123.60840707964601,155.75671202648033L124.09734513274336,158.90998528870907L124.5862831858407,161.8507110457276L125.5641592920354,165.23108986146866L126.05309734513274,160.5142822115974L126.5420353982301,161.63525193085695L127.03097345132744,162.16225327939196L127.51991150442478,161.55372686036532L128.9867256637168,162.26415961750644L129.47566371681415,160.83747088390336L129.9646017699115,160.95102366065956L130.94247787610618,160.0542478852519L132.4092920353982,159.76308691921048L132.89823008849555,159.10215152629644L133.38716814159292,157.52697070001224L133.87610619469027,156.3419455682236L134.3650442477876,156.94464876792938L136.32079646017698,157.92294961382862L136.80973451327435,157.64634669608924L137.2986725663717,155.98964079931346L137.78761061946904,154.69397450042908L138.27654867256638,153.42742429814882L139.25442477876106,153.45362878509255L139.7433628318584,155.1045114625475L140.23230088495575,154.42901802133136L140.7212389380531,154.14659188427117L141.21017699115043,154.56586367537085L142.6769911504425,156.30991786195904L143.16592920353983,156.72336643373788L143.65486725663717,156.6826038984921L144.14380530973452,155.4917555473826L144.63274336283186,153.540977074905L146.09955752212392,152.11719995096237L147.07743362831857,152.07352580605615L147.56637168141594,152.1841669731519L148.0553097345133,151.81730415593967L149.52212389380531,152.3268358465122L150.98893805309734,153.27019737648646L151.47787610619469,153.24399288954274L151.96681415929203,157.5764680642393L153.43362831858406,158.27816599239915L153.9225663716814,160.13868456540393L154.41150442477877,157.76572269216626L154.41150442477877,158.16752482530342L154.90044247787608,159.7194127743043L156.36725663716817,157.94624249111195L156.85619469026548,160.7821503003555L157.34513274336285,163.51906338114506L157.83407079646017,163.15511217359324L158.32300884955754,163.01826651955375L160.2787610619469,164.68370724531076L160.76769911504425,169.5082444526174L161.2566371681416,170.51857300478116L161.74557522123894,172.1461628049528L163.212389380531,172.1461628049528L163.70132743362834,171.70068652690938L164.19026548672565,171.5143435086429L164.67920353982302,170.58845163663113L165.65707964601773,171.0572207919578L167.12389380530973,171.66865882064482L167.61283185840708,172.33541743287972L168.10176991150445,174.47836214294472L168.59070796460173,174.69964447713622L169.07964601769913,173.46512198112052L170.05752212389382,172.309212945936L170.54646017699113,173.6456417800662L171.0353982300885,172.32377099423806L171.52433628318585,172.88862326835846L172.0132743362832,173.71260880225572L173.96902654867256,174.42595316905727L174.45796460176993,173.94844918474928L174.94690265486724,174.61229618732375L175.43584070796462,175.21791099668997L176.90265486725662,175.13638592619836L177.391592920354,175.3081708961628L177.88053097345133,174.19884761554493L178.36946902654867,172.17527890155694L178.858407079646,173.59905602549955L180.81415929203538,174.5569756037759L181.30309734513276,173.71552041191615L181.79203539823007,173.75337133750156L182.28097345132744,174.78990437660906L182.76991150442478,174.40557190143437L183.74778761061947,175.15094397450045L184.2367256637168,172.92065097462302L184.72566371681415,173.3049834497977L185.2146017699115,172.7488660046586L185.70353982300887,173.13611008949368L187.17035398230087,173.10117077356873L187.65929203539827,171.32800049037638L188.14823008849555,172.24515753340688L188.63716814159292,171.19697805565772L190.59292035398227,169.37431040823833L191.08185840707966,168.95212700747823L191.57079646017698,167.76419026602917L192.05973451327435,169.16467451268846L192.54867256637166,168.36107024641413L194.01548672566372,168.2184013730538L194.9933628318584,166.46270074782396L195.48230088495575,167.05666911854848L195.9712389380531,165.85708593845774L196.46017699115043,165.42907931837686L197.92699115044246,164.6109170038004L198.4159292035398,165.4989579502268L198.90486725663715,165.9065833026848L198.90486725663715,165.00107269829593L199.39380530973452,167.158575456663L200.86061946902655,166.97223243839647L201.34955752212392,166.79753585877162L201.8384955752212,165.24855951943115L202.3274336283186,165.01854235625842L202.81637168141592,163.11143802868702L204.28318584070797,161.038371950472L204.77212389380531,163.35601324016181L205.2610619469027,162.57279024151035L205.75,160.81126639695967L206.2389380530973,160.58124923378693L207.70575221238937,159.85043520902292L208.1946902654867,159.0322728944465L208.68362831858408,159.35254995709207L209.6615044247788,157.59102611254136L210.15044247787608,157.3173348044624L211.61725663716814,156.21383474316536L212.10619469026548,155.6518940787054L212.59513274336285,156.83691921049402L213.0840707964602,156.11775162437172L213.57300884955754,156.58652077969842L214.5508849557522,155.21515262964326L215.03982300884957,154.69106289076868L215.5287610619469,155.768358465122L216.01769911504425,154.7580299129582L216.5066371681416,155.37237955130564L217.97345132743362,156.5428466347922L218.462389380531,155.8731764128969L218.95132743362834,158.11802746107637L219.44026548672565,158.44995096236363L219.92920353982302,157.2503677822729L221.8849557522124,155.7188611008949L222.37389380530973,155.5499877405909L222.86283185840708,155.64315924972414L223.35176991150442,155.0433676596788L225.30752212389382,155.8149442196886L225.79646017699113,156.02749172489885L226.2853982300885,156.0799006987863L226.77433628318585,154.8453782027706L227.2632743362832,155.94887826406767L228.73008849557522,157.12225695721466L228.73008849557522,155.94887826406767L229.21902654867256,157.35518573004782L229.70796460176993,159.55345102366064L230.19690265486724,159.81258428343753L231.66371681415927,158.51109476523234L232.15265486725662,157.1746659311021L232.641592920354,157.95497732009318L233.13053097345133,157.32898124310407L233.61946902654867,158.96821748191738L235.08628318584073,159.58256712026477L235.57522123893807,159.55636263332107L236.06415929203538,158.35095623390953L236.55309734513276,161.00925585386784L237.04203539823007,160.476431286012L238.50884955752213,161.24800784602184L239.4867256637168,159.14000245188183L239.97566371681415,161.03254873115117L240.4646017699115,160.46769645703077L242.42035398230087,159.00024518818194L242.90929203539827,157.72204854726002L243.39823008849558,159.26520166727965L243.39823008849558,158.57223856810103L243.88716814159292,159.75144048056882L245.35398230088495,159.37293122471496L245.84292035398227,160.60745372073066L246.33185840707966,159.6844734583793L246.82079646017698,159.97563442442072L247.30973451327435,161.91476645825668L248.77654867256638,161.58284295696947L249.26548672566372,162.82610028196643L249.75442477876106,161.5915777859507L250.2433628318584,163.6966715704303L250.73230088495575,162.79698418536225L252.1991150442478,165.04474684320215L252.68805309734512,164.2644354542111L253.17699115044246,163.4491847492951L253.6659292035398,163.71996444771364L254.64380530973452,164.3867230599485L256.1106194690266,165.38540517347064L256.5995575221239,163.2279024151036L257.0884955752212,162.1942809856565L257.5774336283186,162.37480078460217L258.0663716814159,160.6336582076744L259.04424778761063,159.4661027338482L259.533185840708,158.54312247149687L260.0221238938053,157.79483878877036L260.51106194690266,157.78901556944956L261,158.8313718278779L262.466814159292,158.9332781659924L262.95575221238937,159.47483756282946L263.44469026548677,158.80225573127376L263.93362831858406,159.25355522863796L264.4225663716814,158.52565281353438L265.8893805309734,159.76017530955008L266.37831858407077,159.4428098565649L266.86725663716817,159.14291406154223L267.3561946902655,159.41369375996075L267.8451327433628,160.63948142699522L270.28982300884957,161.61195905357363L270.7787610619469,161.3877651097217L271.2676991150442,163.05902905479954L271.7566371681416,163.36183645948262L273.2234513274336,164.01986024273629L273.71238938053096,165.83670467083485L273.71238938053096,165.85708593845774L274.2013274336283,165.55427853377466L274.6902654867257,166.6344857177884L276.15707964601773,169.1326468064239L276.6460176991151,169.27240407012383L277.13495575221236,172.78089371092315L277.62389380530976,170.95822606350373L278.1128318584071,168.97250827510112L279.57964601769913,171.8433554002697L280.0685840707965,173.06914306730414L280.5575221238938,172.52467206080667L281.04646017699116,171.5871337501532L281.5353982300885,172.66151771484613L283.00221238938053,179.35239671447835L283.4911504424779,176.90664459973027L284.46902654867256,178.22851538555844L284.9579646017699,180.8547872992522L285.44690265486724,181.73700502635774L286.91371681415933,181.4254627926934L287.4026548672567,184.04008826774552L287.89159292035396,183.85665685913938L288.3805309734513,184.16237587348292L288.3805309734513,181.8156184871889L289.8473451327433,177.89659188427117L290.33628318584067,179.69596665440727L290.825221238938,181.48078337624125L291.31415929203547,180.333609170038L291.80309734513276,181.64092190756404L293.2699115044248,181.33811450288096L293.7588495575221,183.36168321686893L294.24778761061947,181.79523721956602L294.7367256637168,181.39925830574964L295.22566371681415,181.9379060929263L296.6924778761062,183.18698663724408L297.1814159292035,180.91010788280005L297.6703539823009,179.55912100036778L298.15929203539827,177.66948633075884L298.6482300884956,178.6739916636018L300.6039823008849,178.8574230722079L301.09292035398227,177.68404437906094L301.5818584070796,179.92307220791957L302.070796460177,181.1459482652936L302.5597345132743,181.39634669608924L303.53761061946904,182.08348657594703L304.0265486725664,182.406675248253L304.5154867256637,183.76057374034573L305.00442477876106,181.92043643496385L305.4933628318584,183.72563442442075L306.96017699115043,184.33707245310774L307.4491150442478,183.82171754321442L307.9380530973451,184.87572024028444L308.42699115044246,186.56445384332474L308.91592920353986,185.95592742429815L310.38274336283183,182.93658820644845L310.87168141592923,183.56258428343753L311.3606194690266,182.33970822606352L311.84955752212386,182.33970822606352L312.3384955752212,183.01811327694006L314.29424778761063,184.10705528993503L314.783185840708,183.07634547014834L315.2721238938054,182.0776633566262L315.76106194690266,183.38497609415228L316.25,182.63086919210494L317.716814159292,180.96542846634793L318.20575221238937,180.86643373789383L318.20575221238937,181.4050815250705L318.69469026548677,182.33970822606352L319.18362831858406,181.387611867108L320.65044247787614,182.41249846757387L321.1393805309734,182.2145090106657L321.62831858407077,184.04008826774552L322.11725663716817,183.9614748069143L322.6061946902655,183.79551305627066L324.07300884955754,185.0358587716072L324.5619469026549,184.84951575334068L325.0508849557522,185.2396714478362L325.53982300884957,185.2396714478362L326.0287610619469,185.0154775039843L327.49557522123894,184.78254873115117L327.9845132743363,184.87572024028444L328.4734513274336,185.14941154836336L329.4513274336283,185.14941154836336L329.9402654867257,183.57714233173962L331.40707964601773,182.46199583180092L331.8960176991151,182.91620693882555L332.38495575221236,183.50144048056885L332.87389380530976,183.0093784479588L333.3628318584071,183.62663969596667L334.34070796460173,184.1856687507662L334.8296460176991,184.46227166850557L335.3185840707965,185.1552347676842L335.8075221238938,185.722998651465L336.29646017699116,186.02871766580853L338.25221238938053,187.23121245555964L338.7411504424779,185.88313718278778L339.2300884955752,184.27301704057865L339.71902654867256,184.27301704057865L341.18584070796453,183.9003310040456L341.674778761062,183.58296555106043L342.16371681415933,182.57263699889666L342.6526548672567,182.92203015814638L343.14159292035396,183.7576621306853L345.0973451327433,183.35585999754812L345.58628318584067,182.9278533774672L346.075221238938,182.7618916268236L346.56415929203547,181.914613215643L347.05309734513276,180.96542846634793L348.5199115044248,180.1530893710923L348.5199115044248,181.51572269216626L349.0088495575221,181.80979526786808L349.49778761061947,181.09645090106656L349.9867256637168,181.12847860733112L351.9424778761062,182.47655388010295L352.4314159292035,182.5231396346696L352.9203539823009,183.60917003800418L353.40929203539827,183.44611989702096L354.87610619469024,184.6835540026971L355.36504424778764,183.72272281476032L355.8539823008849,183.45776633566263L356.34292035398227,184.03135343876426L356.8318584070796,183.99641412283927L358.78761061946904,184.39530464631605L359.2765486725664,184.27010543091822L359.7654867256637,183.45485472600222L360.25442477876106,184.13325977687876L360.7433628318584,185.16396959666542L362.21017699115043,185.8016121122962L362.21017699115043,184.19440357974744L362.6991150442478,183.01520166727965L363.1880530973451,181.94664092190757L363.67699115044246,182.06892852764497L365.1438053097345,182.2174206203261L365.63274336283183,180.98289812431042L366.12168141592923,180.44133872747335L366.6106194690266,180.4122226308692L367.09955752212386,180.42095745985043L368.56637168141594,178.65361039597892L369.05530973451323,178.99135711658698L369.54424778761063,178.9942687262474L370.033185840708,178.01014466102734L370.5221238938054,178.88945077847248L371.98893805309734,179.5765906583303L372.4778761061946,179.39315924972414L373.45575221238937,178.35371460095624L373.94469026548677,177.18324751746968L374.43362831858406,176.22823954885374L375.90044247787614,175.5119835723918L376.3893805309734,176.51648890523478L376.87831858407077,176.13215643006006L377.36725663716817,175.18588329042538L377.36725663716817,175.18588329042538L378.83407079646014,174.99662866249844L379.32300884955754,175.5527461076376L379.8119469026549,175.74782395488538L380.3008849557522,174.6385006742675L380.78982300884957,174.06491357116587L382.2566371681416,174.91510359200686L382.74557522123894,174.54824077479466L383.2345132743363,174.621031016305L383.7234513274336,173.48841485840381L384.21238938053096,173.92515630746598L385.679203539823,173.6834927056516L386.1681415929204,173.92515630746598L386.65707964601773,173.5641167095746L387.1460176991151,173.36321564300601L388.12389380530976,172.95267868088757L389.59070796460173,171.54637121490742L390.0796460176991,171.36002819664094L390.5685840707965,171.42117199950962L391.0575221238938,172.42276572269213L391.54646017699116,172.38491479710677L392.52433628318585,172.27427363001104L393.0132743362832,173.77375260512443L393.50221238938053,175.2091761677087L393.9911504424779,174.20175922520534L394.4800884955752,174.3560745372073L395.94690265486724,173.12446365085202L396.43584070796453,172.8915348780189L396.924778761062,173.35156920436435L397.41371681415933,173.84363123697437L397.9026548672567,174.33278165992397L399.85840707964604,171.9219688611009L400.3473451327433,171.26103346818684L400.83628318584067,170.67288831678312L401.325221238938,170.45742920191248L403.28097345132744,169.42671938212578L403.7699115044248,169.38595684687996L404.2588495575221,168.9608618364595L404.74778761061947,168.14852274120386L405.2367256637168,167.8777430427853L406.70353982300884,168.1164950349393L407.1924778761062,168.44550692656614L407.1924778761062,169.16467451268846L407.6814159292035,169.25202280250093L408.1703539823009,170.1196824813044L409.6371681415929,170.37590413142087L410.12610619469024,170.3002022802501L410.61504424778764,170.524396224102L411.1039823008849,170.43704793428955L411.59292035398227,169.38886845654042L413.0597345132743,170.00321809488784L413.5486725663717,170.98151894078705L414.03761061946904,170.33805320583548L414.5265486725664,169.27822728944466L415.0154867256637,168.52703199705775L416.48230088495575,168.6638776510972L416.9712389380531,168.52994360671812L417.9491150442478,168.41347922030155L418.4380530973451,169.231641534878L418.92699115044246,169.231641534878L420.3938053097345,169.64217849699645L420.88274336283183,170.57680519798947L421.37168141592923,170.04689223979403L421.8606194690266,170.29729067058966L421.8606194690266,169.66838298394015L423.32743362831854,168.55614809366188L423.81637168141594,168.57652936128477L424.30530973451323,167.23427730783374L424.79424778761063,167.04793428956722L425.283185840708,165.81632340321195L426.75,165.47857668260392L427.23893805309734,165.8862020350619L427.7278761061946,164.36343018266518L428.216814159292,164.0489763393404L428.70575221238937,163.41715704303053L430.17256637168146,163.38512933676597L430.6615044247788,163.4142454333701L431.15044247787614,163.40551060438884L431.6393805309734,162.6019063381145L432.12831858407077,162.42720975848965L434.08407079646014,161.54208042172368L434.57300884955754,161.79830207184014L435.0619469026549,161.92641289689837L435.5508849557522,162.27580605614807L436.03982300884957,161.8099485104818L437.01769911504425,162.0399656736545L437.99557522123894,161.8681807036901L438.4845132743363,160.96267009930122L438.9734513274336,161.44017408360915L440.4402654867257,163.5336214294471L440.929203539823,162.24960156920437L441.4181415929204,162.0749049895795L441.90707964601773,161.5711965183278L442.3960176991151,160.72974132646803L443.8628318584071,160.77632708103468L444.3517699115044,160.6773323525806L444.84070796460173,161.25674267500307L445.3296460176991,160.66277430427854L445.8185840707965,160.48807772465366L447.2853982300885,161.02381390216993L448.2632743362832,161.8710923133505L448.75221238938053,161.90603162927545L449.2411504424779,161.50714110579867L449.7300884955752,160.41237587348292L451.68584070796453,159.64953414245434L452.174778761062,160.1707122716685L452.174778761062,159.75726369988968L452.66371681415933,159.87372808630622L454.1305309734513,159.41951697928158L454.6194690265487,159.00024518818194L455.10840707964604,157.04655510604388L455.5973451327433,156.26624371705282L456.08628318584067,156.12939806301335L457.55309734513276,156.4205590290548L458.0420353982301,156.2866249846757L458.53097345132744,155.98964079931346L459.0199115044248,156.4787912222631L459.5088495575221,156.90097462302316L460.97566371681415,155.80038617138652L461.4646017699115,156.02458011523845L461.95353982300884,156.03331494421968L462.9314159292035,157.34062768174573L463.4203539823009,156.1643373789383L464.8871681415929,155.83823709697194L465.37610619469024,154.67650484246658L465.86504424778764,154.60662621061664L466.3539823008849,154.89196395733725L466.84292035398227,154.54257079808752L467.820796460177,154.44357606963342L468.3097345132743,154.67359323280618L468.7986725663717,154.30381880593356L469.28761061946904,154.51636631114383L469.7765486725664,155.2471803359078L471.2433628318584,154.7201789873728L471.73230088495575,152.128846389604L472.2212389380531,150.33529483878877L472.71017699115043,150.2537697682972L473.1991150442478,150.62063258550938L474.66592920353986,151.04572759592986L475.1548672566372,152.5335601324016L475.6438053097345,153.98063013362756L476.13274336283183,152.8305443177639L476.62168141592923,155.11615790118915L478.57743362831854,154.8803175186956L479.06637168141594,155.0433676596788L479.55530973451323,154.44357606963342L480.04424778761063,153.50603775898L480.533185840708,153.41577785950716L482,151.34271178129214L482,150.90014711290917L482.48893805309734,150.82153365207796L482.9778761061947,151.18839646929015L483.4668141592921,150.47214049282823L484.93362831858406,149.8374095868579L485.42256637168146,149.72968002942258L485.9115044247788,150.03248743410566L486.40044247787614,151.61931469903152L486.8893805309735,151.79109966899594L488.35619469026545,150.05578031138901L488.8451327433628,150.47505210248866L489.33407079646014,150.547842343999L489.82300884955754,150.547842343999L490.3119469026549,151.5960218217482L491.77876106194685,151.79401127865637L492.7566371681416,152.6500245188182L493.24557522123894,152.86548363368885L493.7345132743363,152.79269339217848L494.2234513274336,153.7127620448694L495.6902654867256,154.9851354664705L496.179203539823,154.71726737771237L496.6681415929204,152.4083609170038L496.6681415929204,152.80725144048057L497.15707964601773,153.3196947407135L498.6238938053097,152.64711290915778L499.11283185840705,153.4652752237342L499.6017699115044,153.21487679293858L500.09070796460173,154.1378570552899L500.5796460176991,153.098412406522L502.0464601769912,152.28316170160596L502.53539823008845,151.6629888439377L503.02433628318585,151.1563687630256L503.5132743362832,149.13571165869803L504.00221238938053,149.13571165869803L505.4690265486726,148.38742797597158L505.95796460176985,149.11824200073556L506.4469026548672,148.37869314699032L506.93584070796453,148.643649626088L507.91371681415933,148.643649626088L509.38053097345136,147.68864165747212L509.86946902654864,147.58091210003678L510.358407079646,148.57377099423806L510.8473451327433,148.68732377099423L511.33628318584067,148.2796984185362L512.3141592920355,148.8241694250337L512.8030973451328,149.52004413387274L513.2920353982302,148.66694250337133L513.7809734513273,149.0221588819419L514.2699115044247,150.04122226308692L515.7367256637168,150.04122226308692L516.2256637168142,147.3887458624494L516.7146017699116,148.35540026970702L517.2035398230088,149.41813779575824L517.6924778761062,152.42291896530585L519.1592920353983,150.871031016305L519.6482300884956,150.0383106534265L520.137168141593,149.47345837930612L520.6261061946902,151.97453107760208L521.1150442477876,154.07962486208163L523.070796460177,153.30222508275102L523.5597345132744,152.9732131911242L524.0486725663717,151.99200073556455L524.537610619469,154.08253647174203L525.0265486725664,153.08967757754075L526.4933628318585,153.47983327203627L526.9823008849557,152.87713007233052L526.9823008849557,153.18867230599483L527.4712389380531,152.15505087654776L527.9601769911505,151.65716562461688L529.4269911504424,151.65716562461688L529.9159292035398,150.77785950717174L530.4048672566371,151.02534632830697L530.8938053097345,150.91470516121123L531.3827433628319,151.28156797842345L532.849557522124,151.64551918597525L533.3384955752213,152.62382003187446L533.8274336283187,151.57564055412527L534.316371681416,151.18548485962972L534.8053097345133,150.42264312860118L536.7610619469026,149.15026970700012L537.25,149.1910322422459L537.7389380530974,149.05127497854602L538.2278761061947,148.64947284540884L538.7168141592921,146.2503064852274L540.183628318584,146.21245555964202L540.6725663716813,145.06528135343876L540.6725663716813,144.53536839524335L541.1615044247787,144.343202157656L541.650442477876,144.02292509501044L543.1172566371681,144.82652936128477L543.6061946902655,144.6489211719995L544.0951327433629,144.7450042907932L544.5840707964602,144.5906889787912L545.0730088495576,145.28947529729066L546.5398230088496,144.56157288218705L547.0287610619469,143.51048179477746L547.5176991150443,143.21640921907564L548.0066371681415,144.00836704670834L548.4955752212389,142.7709329410322L549.962389380531,142.3371031016305L550.4513274336283,141.33259776878754L550.9402654867256,141.57717298026233L551.9181415929203,141.29474684320215L552.4070796460177,141.29474684320215L553.8738938053098,140.56102120877773L554.362831858407,140.25530219443422L554.8517699115044,139.94667157043028L555.3407079646018,140.13592619835723L555.8296460176991,139.60019002084098L556.8075221238938,139.4546095378203L557.2964601769912,139.41384700257447L557.7853982300885,138.46466225327939L558.2743362831858,137.52421233296556L558.7632743362832,137.96677700134853L560.2300884955753,138.06286012014218L560.7190265486726,138.78493931592496L561.2079646017698,134.52525438273872L561.6969026548672,132.4143373789383L562.1858407079645,131.14487556699768L563.6526548672566,131.53211965183277L564.141592920354,133.7041804585019L564.6305309734513,133.8322912835601L565.1194690265487,131.7825180826284L565.608407079646,133.98078337624125L567.5641592920355,132.4492766948633L568.0530973451328,134.6824813044011L568.5420353982302,135.468615912713L569.0309734513274,138.3016121122962L569.5199115044247,141.3267745494667L570.4977876106195,136.04802623513547L570.9867256637168,135.31138899105065L571.4756637168142,133.68962241019983L571.9646017699115,134.77565281353438L572.4535398230088,136.09752359936252L573.9203539823009,135.98105921294592L574.4092920353982,136.52261860978302L574.8982300884956,137.69308569326955L575.387168141593,140.773568713988L575.8761061946902,139.44587470883903L577.3429203539823,138.15312001961505L577.8318584070797,138.60150790731888L578.320796460177,138.92469657962485L578.8097345132744,136.23436925340198L579.2986725663717,135.20657104327572L580.7654867256637,135.20657104327572L581.7433628318585,134.05648522741205L582.2323008849557,133.14806301336273L582.7212389380531,133.38972661517715L583.2101769911504,135.47443913203384L584.6769911504424,136.93606718156184L585.1659292035398,137.40483633688856L585.6548672566371,139.18965305872257L585.6548672566371,137.06126639695967L586.1438053097345,136.18778349883536L587.6106194690266,135.96358955498346L588.099557522124,134.38840872869926L588.5884955752213,132.187231825426L589.0774336283187,130.84206816231455L589.566371681416,130.20151403702343L591.0331858407079,131.337041804585L591.5221238938053,130.26556944955254L592.0110619469026,131.10411303175187L592.5,131.67770013485352L592.9889380530974,132.3473703567488L594.4557522123893,131.8815128110825L594.9446902654867,135.41329532916512L595.433628318584,136.7642822115974L596.4115044247787,137.65232315802376L596.900442477876,138.1007110457276L598.3672566371681,138.1007110457276L598.8561946902655,137.60864901311757L599.3451327433629,134.68830452372194L599.8340707964602,134.85426627436559L600.3230088495576,134.40878999632218L601.3008849557523,135.09010665685915L601.7898230088496,136.6856687507662L602.2787610619469,136.41488905234766L602.7676991150443,136.78757508888071L603.2566371681415,137.23887458624492L604.7234513274336,138.49668995954394L605.212389380531,136.65946426382249L605.7013274336283,135.9752359936251L606.1902654867256,134.58348657594703L606.679203539823,134.3156184871889L608.1460176991151,134.50778472477626L608.6349557522124,133.11021208777737L609.1238938053098,134.01863430182664L609.612831858407,134.84844305504475L610.1017699115044,135.09884148584038L612.0575221238938,133.75950104204978L612.5464601769912,133.73620816476645L613.0353982300885,133.43048915042294L613.5243362831858,133.803175186956L614.0132743362832,134.27194434228272L615.4800884955753,133.78861713865393L615.4800884955753,134.46993379919084L615.9690265486726,137.15443790609294L616.4579646017698,136.6885803604266L616.9469026548672,137.47180335907808L618.4137168141592,137.8968983694986L618.9026548672566,136.63617138653916L619.391592920354,136.3158943238936L619.8805309734513,137.24469780556578L620.3694690265487,137.31457643741572L621.8362831858408,138.43263454701483L622.3252212389381,140.14174941767806L622.8141592920355,139.2799129581954L623.3030973451328,140.03984307956355L623.7920353982302,139.64968738506803L625.2588495575221,139.39346573495158L625.7477876106195,139.21876915532673L626.7256637168142,137.1136753708471L627.2146017699115,136.57793919333088L627.7035398230088,134.6562768174574L629.1703539823009,134.6562768174574L629.6592920353982,134.9357913448572L630.1482300884956,133.4479588083854L630.637168141593,133.40428466347922L630.637168141593,133.30528993502512L632.1039823008849,132.2483756282947L632.5929203539823,131.95139144293242L633.0818584070797,131.3224837562829L633.570796460177,129.47361162191982L634.0597345132744,129.82300478116954L635.5265486725664,127.53447958808385L636.0154867256637,127.37725266642147L636.5044247787611,126.21843202157655L636.9933628318585,125.87777369130808L637.4823008849557,124.8878264067672L638.9491150442477,125.22557312737524L639.4380530973451,126.47756528135342L639.9269911504424,126.32907318867228L640.4159292035398,127.3830758857423L641.3938053097345,127.74120387397326L642.8606194690266,128.87090842221403L643.349557522124,125.87195047198725L643.8384955752213,125.7991602304769L644.3274336283187,125.79042540149564L644.816371681416,124.37829471619469L645.7942477876107,124.00269707000122L646.2831858407079,123.07680519798946L646.7721238938053,122.61094765232318L647.2610619469026,121.97912835601323L647.75,118.35999754811819L649.2168141592921,117.41081279882309L649.7057522123893,119.8885926198357L650.1946902654867,119.58578521515261L650.683628318584,119.87985779085449L651.1725663716813,120.47673777123941L652.6393805309734,120.07784724776266L653.1283185840708,120.30786441093538L653.6172566371681,120.3719198234645L654.1061946902655,121.1260267255118L654.5951327433629,122.36637244084832L656.5508849557523,121.43465734951573L657.0398230088496,119.9264435454211L657.5287610619469,118.92484982223856L658.0176991150443,117.3321993379919L658.5066371681415,117.66412283927912L659.9734513274336,117.23029299987739L660.462389380531,117.96984185362264L660.462389380531,117.40207796984186L660.9513274336283,117.8009684933186L661.4402654867256,120.31368763025623L662.9070796460177,120.60193698663724L663.3960176991151,122.18876425156307L663.8849557522124,122.50612970454821L664.3738938053098,120.19722324383963L664.862831858407,120.69219688611008L666.3296460176991,118.76179968125535L666.8185840707965,120.10987495402722L667.3075221238938,118.34252789015568L668.2853982300885,118.28429569694738L669.7522123893805,117.73982469044992L670.2411504424779,119.40526541620693L671.2190265486726,117.8766703444894L671.7079646017698,117.36713865391687L672.1969026548672,117.5738629398063L673.6637168141592,116.784816721834L674.1526548672566,117.34966899595437L674.641592920354,116.53441829103838L675.1305309734513,116.89836949859017L675.1305309734513,116.66544072575701L676.5973451327434,116.34225205345102L677.0862831858408,116.74405418658819L677.5752212389381,116.72367291896529L678.0641592920355,116.46453965918843L678.5530973451328,116.65088267745493L680.0199115044247,116.18502513178865L680.5088495575221,115.60561480936619L680.9977876106195,115.32610028196639L681.4867256637168,115.78031138899104L683.4424778761062,115.4658575456663L683.9314159292035,115.23584038249356L684.4203539823009,115.28824935638102L684.9092920353982,115.76284173102854L685.3982300884956,116.08311879367415L687.3539823008849,114.04208042172367L687.8429203539823,113.5412835601324L688.3318584070797,112.7522373421601L688.820796460177,112.83085080299129L689.3097345132744,112.13497609415224L690.287610619469,110.28901556944953L690.7765486725664,110.52776756160353L691.2654867256637,109.71834007600833L691.7544247787611,109.35147725879611L692.2433628318585,108.53622655388008L694.1991150442477,110.81601691798456L694.6880530973451,111.34301826651955L695.1769911504424,113.1365698173348L695.6659292035398,114.87188917494177L697.1327433628319,111.74773200931715L697.6216814159292,110.59764619345347L698.1106194690266,109.88430182665195L698.599557522124,110.07064484491848L699.0884955752213,112.14079931347308L700.5553097345133,111.20326100281964L701.5331858407079,109.54073188672307L702.0221238938053,109.74745617261247L702.5110619469026,110.00367782272892L703,109.11272526664213L704.4668141592921,107.54627926933921L704.9557522123893,106.57962486208164L705.4446902654867,105.71778840259898L705.4446902654867,106.77179109966899L705.933628318584,106.09920926811326L707.400442477876,105.42080421723672L707.8893805309734,105.21116832168688L708.3783185840708,104.27071840137305L708.8672566371681,105.67702586735318L709.3561946902655,107.9306117445139L711.3119469026549,111.40998528870908L711.8008849557523,110.24242981488291L712.2898230088496,110.16672796371215L712.7787610619469,108.62939806301334L714.2455752212389,107.15903518450412L715.2234513274336,108.2945629520657L715.712389380531,107.47640063748926L716.2013274336283,105.31016305014097L716.6902654867256,105.18205222508274L718.1570796460177,106.53303910751501L718.6460176991151,106.41657472109843L719.1349557522124,107.37449429937475L719.1349557522124,109.0632279024151L719.6238938053098,107.51425156307465L721.0907079646018,107.0571288463896L721.5796460176991,109.42426750030648L722.0685840707965,113.91396959666544L722.5575221238938,112.56589432389359L723.0464601769912,113.72180335907808L724.5132743362832,111.20908422214046L725.0022123893805,110.65587838666175L725.4911504424779,111.24111192840505L725.9800884955753,109.55820154468555L726.4690265486726,107.64527399779328L727.9358407079645,107.96555106043887L728.4247787610619,107.81414735809734L728.9137168141592,108.49255240897388L729.4026548672566,108.52749172489885L730.3805309734513,109.67757754076251L731.8473451327434,110.65878999632217L732.3362831858408,111.32846021821747L732.8252212389381,111.57594703935268L733.3141592920355,111.56430060071104L733.8030973451328,112.44360671815618L734.7809734513274,113.68395243349269L735.2699115044247,113.2180948878264L735.7588495575221,112.13206448449185L736.2477876106195,113.21227166850557L736.7367256637168,114.65643006007109L738.2035398230088,113.37823341914918L738.6924778761062,111.62835601324015L739.1814159292035,110.30357361775161L739.6703539823009,107.8898492092681L741.6261061946902,107.2172673777124L742.1150442477876,107.97137427975969L742.6039823008849,108.0499877405909L743.0929203539823,109.0399350251318L743.5818584070797,108.05581095991172L745.537610619469,109.17678067917126L746.0265486725664,108.61775162437169L746.5154867256637,108.21886110089494L747.0044247787611,109.0399350251318L747.4933628318585,109.06613951207551L748.9601769911504,108.79244820399654L748.9601769911504,108.25380041681991L749.4491150442477,108.90017776143189L749.9380530973451,109.09234399901923L750.4269911504424,110.85969106289078L751.8938053097345,112.95605001838912L752.3827433628319,112.12915287483142L752.8716814159292,111.04312247149686L753.3606194690266,110.85095623390953L753.849557522124,112.39702096358954L755.316371681416,112.63577295574352L755.8053097345133,113.2792386906951L756.2942477876107,111.9428098565649L756.7831858407079,112.46107637611867L757.2721238938053,111.75937844795878L759.2278761061947,108.72548118180703L760.2057522123893,109.40097462302317L760.6946902654867,109.22918965305871L761.183628318584,110.00367782272892L762.650442477876,111.57594703935268L763.1393805309734,113.32291283560131L763.6283185840708,113.26468064239302L764.1172566371681,113.4830513669241L764.1172566371681,115.11064116709574L765.5840707964602,114.90682849086674L766.0730088495576,113.20644844918475L766.5619469026549,114.86315434596052L767.0508849557523,115.32610028196639L767.5398230088496,116.75278901556945L769.0066371681415,118.19112418781414L769.4955752212389,115.2853377467206L769.9845132743363,116.06856074537208L770.4734513274336,113.55875321809488L770.962389380531,114.97961873237708L772.429203539823,113.32291283560131L772.9181415929203,112.38537452494788L773.4070796460177,112.74059090351845L773.8960176991151,112.26599852887091L774.8738938053098,110.0560867966164L776.8296460176991,108.25962363614073L777.3185840707965,107.58121858526418L777.8075221238938,105.99730292999878L778.2964601769912,105.26648890523478L779.2743362831858,106.92901802133136L779.7632743362832,107.0018082628417L780.2522123893805,105.75855093784479L780.7411504424779,105.83134117935515L781.2300884955753,103.74954027215888L782.6969026548672,101.16403089371092L783.1858407079645,100.27598994728451L783.6747787610619,97.3498222385681L784.1637168141592,97.23626946181193L784.6526548672566,95.4863920559029L786.1194690265487,93.97235503248743L786.608407079646,92.54275468922397L787.0973451327434,95.69311634179232L787.5862831858408,95.91731028564423L788.0752212389381,96.30746598013974L790.0309734513274,94.48188672305993L790.5199115044247,96.76458869682479L791.0088495575221,95.69893956111314L791.4977876106195,100.12458624494299L791.9867256637168,101.21643986759837L793.4535398230088,107.15903518450412L793.9424778761062,101.1028870908422L793.9424778761062,104.10766826038984L794.4314159292035,101.19314699031506L794.9203539823009,100.23522741203872L796.387168141593,98.36597401005271L796.8761061946902,99.21907564055411L797.3650442477876,99.23072207919577L797.8539823008849,103.42052838053205L798.3429203539823,106.33796126026726L799.8097345132744,106.21858526419027L800.2986725663717,101.22226308691918L800.787610619469,100.47106779453229L801.2765486725664,101.18732377099421L801.7654867256637,98.31647664582566L803.2323008849557,96.45595807282088L803.7212389380531,96.45013485350006L804.2101769911504,97.95252543827388L805.1880530973451,99.05893710923134L805.6769911504424,101.09124065220055L807.6327433628319,99.43453475542478L808.1216814159292,98.21457030771116L808.6106194690266,98.15342650484246L809.099557522124,100.09255853867843L810.0774336283187,99.3763025622165L810.566371681416,98.01366924114257L811.0553097345133,96.65103592006865L811.5442477876107,95.58538678435701L812.0331858407079,93.39003310040455L813.5,90.14941154836336L813.9889380530974,89.61949859016794L814.4778761061947,90.00091945568222L814.9668141592921,93.00570062522985L815.4557522123893,92.2836214294471L816.9225663716813,92.61263332107391L817.4115044247787,93.75107269829594L817.900442477876,94.40618487188917L818.3893805309734,96.28126149319603L818.8783185840708,98.97450042907931L820.8340707964602,100.93110212087775L821.3230088495576,101.54254014956477L821.8119469026549,99.86836459482653L822.3008849557523,100.12458624494299L822.7898230088496,102.32867475787666L823.7676991150443,96.79370479342894L824.2566371681415,93.45117690327324L824.7455752212389,92.89797106779453L825.2345132743363,91.08112663969595L825.7234513274336,87.13007233051367L827.1902654867256,87.71530587225695L827.679203539823,87.06019369866372L828.1681415929203,93.93741571656244L828.6570796460177,94.90115851415962L829.1460176991151,95.61159127130072L830.612831858407,91.85561480936619L831.1017699115044,94.18490253769768L831.5907079646018,93.3609170038004L832.0796460176991,92.17006865269093L832.5685840707965,92.09436680152017L834.0353982300885,92.14386416574722L835.0132743362832,94.55176535490988L835.5022123893805,94.2897204854726L835.9911504424779,92.64174941767806L836.4800884955753,93.46573495157533L837.9469026548672,93.61422704425647L838.4358407079645,91.72168076498711L838.9247787610619,94.90989334314087L838.9247787610619,97.8389726615177L839.4137168141592,98.01366924114257L840.8805309734513,99.57429201912467L841.3694690265487,96.78788157410813L841.858407079646,97.96999509623636L842.3473451327434,100.11293980630133L842.8362831858408,100.83210739242367L844.3030973451328,102.55869192104939L844.7920353982302,100.37498467573863L845.2809734513274,103.1468370724531L846.2588495575221,104.14260757631482L847.7256637168142,100.48853745249478L848.2146017699115,101.33872747333578L848.7035398230088,98.71827877896285L849.6814159292035,97.0499264435454L850.1703539823009,96.53457153365207L851.637168141593,95.57082873605492L852.1261061946902,96.17062032610028L852.6150442477876,96.71217972293736L853.1039823008849,96.2550570062523L853.5929203539823,95.39322054676963L854.570796460177,95.91148706632342L855.0597345132744,96.79370479342894L855.5486725663717,99.30351232070613L856.037610619469,99.66746352825794L856.5265486725664,99.06184871889172L857.9933628318585,98.71536716930243L858.4823008849557,94.7148154958931L858.9712389380531,94.57214662253278L859.4601769911504,93.95779698418535L859.9491150442477,92.53693146990312L861.9048672566371,91.6343324751747L862.3938053097345,92.76694863307587L862.8827433628319,92.0448694372931L863.3716814159292,92.07980875321809L865.816371681416,90.26587593477991L866.3053097345133,89.62241019982837L866.7942477876107,88.28598136569818L867.2831858407079,87.01360794409709L868.75,87.20868579134483L868.75,86.76903273262228L869.2389380530974,86.96993379919087L869.7278761061947,87.30768051979894L870.2168141592921,87.7677148461444L872.1725663716813,86.34393772220177L872.6615044247787,85.05991786195904L873.150442477876,85.4558967757754L873.6393805309734,87.62504597278411L875.1061946902655,85.55489150422947L875.5951327433629,87.59301826651954L876.0840707964602,79.95004290793183L876.5730088495576,80.54109966899595L877.0619469026549,79.76952310898614L878.5287610619469,78.10117077356871L879.0176991150443,77.0908422214049L879.9955752212389,77.17527890155694L880.4845132743363,77.48682113522126L880.9734513274336,76.15912713007232L882.4402654867256,74.91004658575454L882.929203539823,73.49500429079318L883.4181415929203,71.2093907073679L883.9070796460177,66.4081463773446L883.9070796460177,66.33535613583422L885.3738938053098,63.66249846757384L885.862831858407,61.6651342405296L886.3517699115044,65.09792203015813L886.8407079646018,63.77605124433002L887.3296460176991,63.80225573127374L889.2853982300885,60.09577663356623L889.7743362831858,60.62277798210125L890.2632743362832,59.64738874586245L890.7522123893805,57.89459973029299L892.2190265486726,56.91921049405417L892.7079646017698,54.10950717175433L893.1969026548672,52.06264558048299L894.1747787610619,51.4715888194189L894.6637168141592,51.26486453352948L896.1305309734513,54.764619345347555L896.6194690265487,55.6089861468677L897.108407079646,55.48378693146988L897.5973451327434,52.19366801520165L898.0862831858408,51.267776143189906L899.0641592920355,49.279146745126866L899.5530973451328,44.59145519185972L900.0420353982302,38.33731764128966L900.5309734513274,39.507784724776265L901.0199115044247,39.50487311511583L902.4867256637168,34.98314331249232L902.9756637168142,33.56810101753092L903.4646017699115,34.575517960034304L903.9535398230088,35.49558661272523L904.4424778761062,36.4535061910016L905.9092920353982,33.27111683216867L906.3982300884956,31.087409586857888L906.887168141593,30.173164153487797L907.3761061946902,32.43257324996933L907.8650442477876,35.43444280985656L909.820796460177,29.879091577785942L910.3097345132744,26.766580850802963L910.7986725663717,28.22529729067059L911.287610619469,25.49711903886233L913.2433628318585,24.754658575456652L913.2433628318585,27.022802500919422L913.7323008849557,27.675003064852238L914.2212389380531,28.6736851783744L914.7101769911504,33.78064852274119L916.1769911504424,41.08878877038125L916.6659292035398,32.47915900453596L917.1548672566371,32.875137918352316L917.6438053097345,38.96040210861833L918.1327433628319,43.17058967757751L919.599557522124,43.54327571411055L920.0884955752213,46.86833394630378L920.5774336283187,32.39181071472353L921.066371681416,33.06148093661883L921.5553097345133,34.42993747701358L923.0221238938053,39.96781905112171L924,40.50646683829838"

  • 原始搞法

  1 2 3 4 5 6 7

  { let path = `M${x(data[0].date)},${y(data[0].close)}`; for (let i = 1; i < data.length; ++i) { path += `L${x(data[i].date)},${y(data[i].close)}`; } return path; }

  • 使用d3.line

  1 2 3

  line = d3.line() .x(d => x(d.date)) .y(d => y(d.close))

绘制折线图

1
2
3
4
5

html`<svg viewBox="0 0 ${width} ${height}">
  <path d="${line(data)}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path> // stroke-miterlimit为斜接限制， 设为50可以看到尖峰
  ${d3.select(svg`<g>`).call(xAxis).node()}
  ${d3.select(svg`<g>`).call(yAxis).node()}
</svg>`

绘制面积图

1
2
3
4

area = d3.area()
    .x(d => x(d.date))
    .y0(y(0))
    .y1(d => y(d.close))

绘制面积图轮廓线

1
2
3
4
5
6
7
8
9

html`<svg viewBox="0 0 ${width} ${height}">
  <path d="${areaBand(data)}" fill="#ddd"></path>
  <g fill="none" stroke-width="1.5" stroke-miterlimit="1">
    <path d="${areaBand.lineY0()(data)}" stroke="#00f"></path>
    <path d="${areaBand.lineY1()(data)}" stroke="#f00"></path>
  </g>
  ${d3.select(svg`<g>`).call(xAxis).node()}
  ${d3.select(svg`<g>`).call(yAxis).node()}
</svg>`

角度与弧度转换

1

弧度和角度的换算：1°=π/180°，1rad=180°/π  // rad为弧度，1角度等于π/180弧度，1弧度等于180/π角度

• 参考弧度和角度的换算

生成环状图

1
2
3

html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;">
  ${Array.from({length: n}, (_, i) => svg`<path stroke="black" fill="${d3.interpolateRainbow(i / n)}" d="${arc([i / n * 2 * Math.PI, (i + 1) / n * 2 * Math.PI])}"></path>`)}
</svg>`

• Array.from生成一个n个元素的数组，每个元素为根据序号生成的环块

使用d3.pie生成环状图数据

1
2
3

pieArcData = d3.pie()
    .value(d => d.count)
  (fruits)

生成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

pieArcData = Array(8) [
  0: Object {data: Object, index: 0, value: 21, startAngle: 0, endAngle: 2.443460952792061, padAngle: 0}
  1: Object {data: Object, index: 1, value: 13, startAngle: 2.443460952792061, endAngle: 3.9560796378538132, padAngle: 0}
  2: Object {data: Object, index: 2, value: 8, startAngle: 3.9560796378538132, endAngle: 4.886921905584122, padAngle: 0}
  3: Object {data: Object, index: 3, value: 5, startAngle: 4.886921905584122, endAngle: 5.468698322915565, padAngle: 0}
  4: Object {data: Object, index: 4, value: 3, startAngle: 5.468698322915565, endAngle: 5.817764173314431, padAngle: 0}
  5: Object {data: Object, index: 5, value: 2, startAngle: 5.817764173314431, endAngle: 6.050474740247008, padAngle: 0}
  6: Object {data: Object, index: 6, value: 1, startAngle: 6.050474740247008, endAngle: 6.166830023713296, padAngle: 0}
  7: Object {data: Object, index: 7, value: 1, startAngle: 6.166830023713296, endAngle: 6.2831853071795845, padAngle: 0}
]

圆环图生成器

1
2
3
4
5
6

arcPie = d3.arc()
    .innerRadius(210)
    .outerRadius(310)
    .padRadius(300)
    .padAngle(2 / 300)
    .cornerRadius(8)

应用

1
2
3
4
5
6
7
8
9

html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;" text-anchor="middle" font-family="sans-serif">
  ${pieArcData.map(d => svg`
    <path fill="steelblue" d="${arcPie(d)}"></path>
    <text fill="red" transform="translate(${arcPie.centroid(d).join(",")})"> // arcPie.centroid计算环条的中心点
      <tspan x="0" font-size="24">${d.data.name}</tspan>
      <tspan x="0" font-size="12" dy="1.3em">${d.value.toLocaleString("en")}</tspan>
    </text>
  `)}
</svg>`