Skip to content

Commit afe041f

Browse files
phoeguophoeguo
committedMar 27, 2019
version 0.4.0
1 parent 37420e6 commit afe041f

9 files changed

+131
-53
lines changed
 

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ gist/
77
test/
88
docs/
99
.DS_store
10+
copy_to_g3viz.sh

‎css/style.css

+9
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,15 @@
8080
font-size: 10px;
8181
}
8282

83+
/*
84+
.axis--x path,
85+
.axis--x line {
86+
fill: none;
87+
stroke: #c4c8ca;
88+
stroke-width: 1;
89+
}
90+
*/
91+
8392
.axis path,
8493
.axis line {
8594
/*

‎dist/g3-lollipop.js

+43-17
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ function getUniqueID(left, right) {
2121

2222
var palettes = {
2323
bottlerocket1: ["#A42820", "#5F5647", "#9B110E", "#3F5151", "#4E2A1E",
24-
"#550307", "#0C1707"],
24+
"#550307", "#0C1707"
25+
],
2526
bottlerocket2: ["#FAD510", "#CB2314", "#273046", "#354823", "#1E1E1E"],
2627
rushmore1: ["#E1BD6D", "#F2300F", "#35274A", "#EABE94", "#0B775E"],
2728
royal1: ["#899DA4", "#C93312", "#FAEFD1", "#DC863B"],
@@ -40,38 +41,53 @@ var palettes = {
4041
google16: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099",
4142
"#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395",
4243
"#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300",
43-
"#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"],
44+
"#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"
45+
],
4446
google5: ["#008744", "#0057e7", "#d62d20", "#ffa700", "#ffffff"],
4547
material1: ["#263238", "#212121", "#3e2723", "#dd2c00", "#ff6d00",
4648
"#ffab00", "#ffd600", "#aeea00", "#64dd17", "#00c853",
4749
"#00bfa5", "#00b8d4", "#0091ea", "#2962ff", "#304ffe",
48-
"#6200ea", "#aa00ff", "#c51162", "#d50000"],
50+
"#6200ea", "#aa00ff", "#c51162", "#d50000"
51+
],
4952
pie1: ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99"],
5053
pie2: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00"],
5154
pie3: ["#495769", "#A0C2BB", "#F4A775", "#F4C667", "#F37361"],
5255
pie4: ["#FA7921", "#E55934", "#9BC53D", "#FDE74C", "#5BC0EB"],
5356
pie5: ["#5DA5DA", "#4D4D4D", "#60BD68", "#B2912F", "#B276B2",
54-
"#F15854", "#FAA43A"],
57+
"#F15854", "#FAA43A"
58+
],
5559
pie6: ["#537ea2", "#42a593", "#9f1a1a", "#7c5f95", "#61a070"],
5660
pie7: ["#bddff9", "#1e72bf", "#ead1ab", "#a2dbc5", "#c7ae7d"],
5761
breakfast: ["#b6411a", "#eec3d8", "#4182dd", "#ecf0c8", "#2d6328"],
5862
set1: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00",
59-
"#ffff33", "#a65628", "#f781bf", "#999999"],
63+
"#ffff33", "#a65628", "#f781bf", "#999999"
64+
],
6065
set2: ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854",
61-
"#ffd92f", "#e5c494", "#b3b3b3"],
66+
"#ffd92f", "#e5c494", "#b3b3b3"
67+
],
6268
set3: ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3",
6369
"#fdb462", "#b3de69", "#fccde5", "#d9d9d9", "#bc80bd",
64-
"#ccebc5", "#ffed6f"],
70+
"#ccebc5", "#ffed6f"
71+
],
6572
category10: ["#1f77b4", "#2ca02c", "#d62728", "#ff7f0e", "#9467bd",
66-
"#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
73+
"#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
74+
],
6775
pastel1: ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6",
68-
"#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"],
76+
"#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"
77+
],
6978
pastel2: ["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9",
70-
"#fff2ae", "#f1e2cc", "#cccccc"],
79+
"#fff2ae", "#f1e2cc", "#cccccc"
80+
],
7181
accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#bf5b17",
72-
"#386cb0", "#f0027f", "#666666"],
82+
"#386cb0", "#f0027f", "#666666"
83+
],
7384
dark2: ["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e",
74-
"#e6ab02", "#a6761d", "#666666"],
85+
"#e6ab02", "#a6761d", "#666666"
86+
],
87+
rainbow: ["#e6261f", "#eb7532", "#f7d038", "#a3e048", "#49da9a", "#34bbe6", "#4355db", "#d23be7"],
88+
chineseWaterColor: [
89+
"#832f0e", "#0c0a08", "#594a40", "#8e7967", "#e3c2a0", "#deaa6e", "#81947a"
90+
]
7591
};
7692

7793
function defaultPalette() {
@@ -86,8 +102,8 @@ function listPalettes() {
86102
return Object.keys(palettes);
87103
}
88104

89-
function scaleOrdinal(paletteName){
90-
return d3.scaleOrdinal(getPalette(paletteName));
105+
function scaleOrdinal(paletteName) {
106+
return d3.scaleOrdinal(getPalette(paletteName));
91107
}
92108

93109
// ==========================================
@@ -1165,7 +1181,7 @@ function Lollipop(target, chartType, width) {
11651181

11661182
var _updateX = function () {
11671183
_xScale.domain(_xRange);
1168-
_domXAxis.call(_xAxis);
1184+
_domXAxis.call(_xReAxis);
11691185

11701186
// update domains
11711187
_domainRect
@@ -1914,12 +1930,22 @@ function Lollipop(target, chartType, width) {
19141930
});
19151931
};
19161932

1933+
var _xReAxis = function (g) {
1934+
var s = g.selection ? g.selection() : g;
1935+
g.call(_xAxis);
1936+
1937+
s.select(".domain").remove();
1938+
s.selectAll(".tick line")
1939+
.attr("stroke", "#c4c8ca")
1940+
.attr("stroke-width", 1);
1941+
};
1942+
19171943
var _yReAxis = function (g) {
19181944
var s = g.selection ? g.selection() : g;
19191945
g.call(_yAxis);
19201946

19211947
s.select(".domain").remove();
1922-
let __tickLine = s.selectAll(".tick line").filter(Number)
1948+
let __tickLine = s.selectAll(".tick line")//.filter(Number)
19231949
.attr("stroke", lollipopOpt.ylab.lineColor)
19241950
.attr("stroke-width", lollipopOpt.ylab.lineWidth);
19251951
if(lollipopOpt.ylab.lineStyle == "dash"){
@@ -1961,7 +1987,7 @@ function Lollipop(target, chartType, width) {
19611987
.attr("clip-path", "url(#" + lollipopOpt.xAxisDefsId + ")")
19621988
.attr("class", "axis axis--x")
19631989
.attr("transform", "translate(0, " + (_mainH + domainOpt.height) + ")")
1964-
.call(_xAxis);
1990+
.call(_xReAxis);
19651991
};
19661992

19671993
var _addBackground = function (g, bgColor, height, width) {

‎dist/g3-lollipop.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/g3-utils.js

+30-14
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ function getUniqueID(left, right) {
2121

2222
var palettes = {
2323
bottlerocket1: ["#A42820", "#5F5647", "#9B110E", "#3F5151", "#4E2A1E",
24-
"#550307", "#0C1707"],
24+
"#550307", "#0C1707"
25+
],
2526
bottlerocket2: ["#FAD510", "#CB2314", "#273046", "#354823", "#1E1E1E"],
2627
rushmore1: ["#E1BD6D", "#F2300F", "#35274A", "#EABE94", "#0B775E"],
2728
royal1: ["#899DA4", "#C93312", "#FAEFD1", "#DC863B"],
@@ -40,38 +41,53 @@ var palettes = {
4041
google16: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099",
4142
"#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395",
4243
"#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300",
43-
"#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"],
44+
"#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"
45+
],
4446
google5: ["#008744", "#0057e7", "#d62d20", "#ffa700", "#ffffff"],
4547
material1: ["#263238", "#212121", "#3e2723", "#dd2c00", "#ff6d00",
4648
"#ffab00", "#ffd600", "#aeea00", "#64dd17", "#00c853",
4749
"#00bfa5", "#00b8d4", "#0091ea", "#2962ff", "#304ffe",
48-
"#6200ea", "#aa00ff", "#c51162", "#d50000"],
50+
"#6200ea", "#aa00ff", "#c51162", "#d50000"
51+
],
4952
pie1: ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99"],
5053
pie2: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00"],
5154
pie3: ["#495769", "#A0C2BB", "#F4A775", "#F4C667", "#F37361"],
5255
pie4: ["#FA7921", "#E55934", "#9BC53D", "#FDE74C", "#5BC0EB"],
5356
pie5: ["#5DA5DA", "#4D4D4D", "#60BD68", "#B2912F", "#B276B2",
54-
"#F15854", "#FAA43A"],
57+
"#F15854", "#FAA43A"
58+
],
5559
pie6: ["#537ea2", "#42a593", "#9f1a1a", "#7c5f95", "#61a070"],
5660
pie7: ["#bddff9", "#1e72bf", "#ead1ab", "#a2dbc5", "#c7ae7d"],
5761
breakfast: ["#b6411a", "#eec3d8", "#4182dd", "#ecf0c8", "#2d6328"],
5862
set1: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00",
59-
"#ffff33", "#a65628", "#f781bf", "#999999"],
63+
"#ffff33", "#a65628", "#f781bf", "#999999"
64+
],
6065
set2: ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854",
61-
"#ffd92f", "#e5c494", "#b3b3b3"],
66+
"#ffd92f", "#e5c494", "#b3b3b3"
67+
],
6268
set3: ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3",
6369
"#fdb462", "#b3de69", "#fccde5", "#d9d9d9", "#bc80bd",
64-
"#ccebc5", "#ffed6f"],
70+
"#ccebc5", "#ffed6f"
71+
],
6572
category10: ["#1f77b4", "#2ca02c", "#d62728", "#ff7f0e", "#9467bd",
66-
"#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
73+
"#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
74+
],
6775
pastel1: ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6",
68-
"#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"],
76+
"#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"
77+
],
6978
pastel2: ["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9",
70-
"#fff2ae", "#f1e2cc", "#cccccc"],
79+
"#fff2ae", "#f1e2cc", "#cccccc"
80+
],
7181
accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#bf5b17",
72-
"#386cb0", "#f0027f", "#666666"],
82+
"#386cb0", "#f0027f", "#666666"
83+
],
7384
dark2: ["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e",
74-
"#e6ab02", "#a6761d", "#666666"],
85+
"#e6ab02", "#a6761d", "#666666"
86+
],
87+
rainbow: ["#e6261f", "#eb7532", "#f7d038", "#a3e048", "#49da9a", "#34bbe6", "#4355db", "#d23be7"],
88+
chineseWaterColor: [
89+
"#832f0e", "#0c0a08", "#594a40", "#8e7967", "#e3c2a0", "#deaa6e", "#81947a"
90+
]
7591
};
7692

7793
function defaultPalette() {
@@ -86,8 +102,8 @@ function listPalettes() {
86102
return Object.keys(palettes);
87103
}
88104

89-
function scaleOrdinal(paletteName){
90-
return d3.scaleOrdinal(getPalette(paletteName));
105+
function scaleOrdinal(paletteName) {
106+
return d3.scaleOrdinal(getPalette(paletteName));
91107
}
92108

93109
// ==========================================

‎dist/g3-utils.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lollipop/lollipop.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export default function Lollipop(target, chartType, width) {
235235

236236
var _updateX = function () {
237237
_xScale.domain(_xRange);
238-
_domXAxis.call(_xAxis);
238+
_domXAxis.call(_xReAxis);
239239

240240
// update domains
241241
_domainRect
@@ -984,12 +984,22 @@ export default function Lollipop(target, chartType, width) {
984984
});
985985
};
986986

987+
var _xReAxis = function (g) {
988+
var s = g.selection ? g.selection() : g;
989+
g.call(_xAxis);
990+
991+
s.select(".domain").remove();
992+
s.selectAll(".tick line")
993+
.attr("stroke", "#c4c8ca")
994+
.attr("stroke-width", 1);
995+
};
996+
987997
var _yReAxis = function (g) {
988998
var s = g.selection ? g.selection() : g;
989999
g.call(_yAxis);
9901000

9911001
s.select(".domain").remove();
992-
let __tickLine = s.selectAll(".tick line").filter(Number)
1002+
let __tickLine = s.selectAll(".tick line")//.filter(Number)
9931003
.attr("stroke", lollipopOpt.ylab.lineColor)
9941004
.attr("stroke-width", lollipopOpt.ylab.lineWidth);
9951005
if(lollipopOpt.ylab.lineStyle == "dash"){
@@ -1031,7 +1041,7 @@ export default function Lollipop(target, chartType, width) {
10311041
.attr("clip-path", "url(#" + lollipopOpt.xAxisDefsId + ")")
10321042
.attr("class", "axis axis--x")
10331043
.attr("transform", "translate(0, " + (_mainH + domainOpt.height) + ")")
1034-
.call(_xAxis);
1044+
.call(_xReAxis);
10351045
};
10361046

10371047
var _addBackground = function (g, bgColor, height, width) {

‎src/utils/color.js

+31-15
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import d3 from "d3";
22

33
export var palettes = {
44
bottlerocket1: ["#A42820", "#5F5647", "#9B110E", "#3F5151", "#4E2A1E",
5-
"#550307", "#0C1707"],
5+
"#550307", "#0C1707"
6+
],
67
bottlerocket2: ["#FAD510", "#CB2314", "#273046", "#354823", "#1E1E1E"],
78
rushmore1: ["#E1BD6D", "#F2300F", "#35274A", "#EABE94", "#0B775E"],
89
royal1: ["#899DA4", "#C93312", "#FAEFD1", "#DC863B"],
@@ -21,38 +22,53 @@ export var palettes = {
2122
google16: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099",
2223
"#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395",
2324
"#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300",
24-
"#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"],
25+
"#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"
26+
],
2527
google5: ["#008744", "#0057e7", "#d62d20", "#ffa700", "#ffffff"],
2628
material1: ["#263238", "#212121", "#3e2723", "#dd2c00", "#ff6d00",
2729
"#ffab00", "#ffd600", "#aeea00", "#64dd17", "#00c853",
2830
"#00bfa5", "#00b8d4", "#0091ea", "#2962ff", "#304ffe",
29-
"#6200ea", "#aa00ff", "#c51162", "#d50000"],
31+
"#6200ea", "#aa00ff", "#c51162", "#d50000"
32+
],
3033
pie1: ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99"],
3134
pie2: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00"],
3235
pie3: ["#495769", "#A0C2BB", "#F4A775", "#F4C667", "#F37361"],
3336
pie4: ["#FA7921", "#E55934", "#9BC53D", "#FDE74C", "#5BC0EB"],
3437
pie5: ["#5DA5DA", "#4D4D4D", "#60BD68", "#B2912F", "#B276B2",
35-
"#F15854", "#FAA43A"],
38+
"#F15854", "#FAA43A"
39+
],
3640
pie6: ["#537ea2", "#42a593", "#9f1a1a", "#7c5f95", "#61a070"],
3741
pie7: ["#bddff9", "#1e72bf", "#ead1ab", "#a2dbc5", "#c7ae7d"],
3842
breakfast: ["#b6411a", "#eec3d8", "#4182dd", "#ecf0c8", "#2d6328"],
3943
set1: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00",
40-
"#ffff33", "#a65628", "#f781bf", "#999999"],
44+
"#ffff33", "#a65628", "#f781bf", "#999999"
45+
],
4146
set2: ["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854",
42-
"#ffd92f", "#e5c494", "#b3b3b3"],
47+
"#ffd92f", "#e5c494", "#b3b3b3"
48+
],
4349
set3: ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3",
4450
"#fdb462", "#b3de69", "#fccde5", "#d9d9d9", "#bc80bd",
45-
"#ccebc5", "#ffed6f"],
51+
"#ccebc5", "#ffed6f"
52+
],
4653
category10: ["#1f77b4", "#2ca02c", "#d62728", "#ff7f0e", "#9467bd",
47-
"#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
54+
"#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
55+
],
4856
pastel1: ["#fbb4ae", "#b3cde3", "#ccebc5", "#decbe4", "#fed9a6",
49-
"#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"],
57+
"#ffffcc", "#e5d8bd", "#fddaec", "#f2f2f2"
58+
],
5059
pastel2: ["#b3e2cd", "#fdcdac", "#cbd5e8", "#f4cae4", "#e6f5c9",
51-
"#fff2ae", "#f1e2cc", "#cccccc"],
60+
"#fff2ae", "#f1e2cc", "#cccccc"
61+
],
5262
accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#bf5b17",
53-
"#386cb0", "#f0027f", "#666666"],
63+
"#386cb0", "#f0027f", "#666666"
64+
],
5465
dark2: ["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e",
55-
"#e6ab02", "#a6761d", "#666666"],
66+
"#e6ab02", "#a6761d", "#666666"
67+
],
68+
rainbow: ["#e6261f", "#eb7532", "#f7d038", "#a3e048", "#49da9a", "#34bbe6", "#4355db", "#d23be7"],
69+
chineseWaterColor: [
70+
"#832f0e", "#0c0a08", "#594a40", "#8e7967", "#e3c2a0", "#deaa6e", "#81947a"
71+
]
5672
};
5773

5874
export function defaultPalette() {
@@ -67,6 +83,6 @@ export function listPalettes() {
6783
return Object.keys(palettes);
6884
}
6985

70-
export function scaleOrdinal(paletteName){
71-
return d3.scaleOrdinal(getPalette(paletteName));
72-
}
86+
export function scaleOrdinal(paletteName) {
87+
return d3.scaleOrdinal(getPalette(paletteName));
88+
}

‎test/simple_test.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@
8282
var chartID = lollipop.options.chartID;
8383

8484
document.getElementById("save-as-png").onclick = function (e) {
85-
g3.output().toPNG(chartID, 'out_png');
85+
g3.output().toPNG('out_png', chartID);
8686
};
8787

8888
document.getElementById("save-as-svg").onclick = function (e) {
89-
g3.output().toSVG(chartID, 'out_svg');
89+
g3.output().toSVG('out_svg', chartID);
9090
};
9191
});
9292
</script>

0 commit comments

Comments
 (0)
Please sign in to comment.