Skip to content

Instantly share code, notes, and snippets.

@shimizu

shimizu/.block

Last active December 1, 2017 02:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shimizu/96ed1b3153ca2ba307d78641850b51b2 to your computer and use it in GitHub Desktop.
Save shimizu/96ed1b3153ca2ba307d78641850b51b2 to your computer and use it in GitHub Desktop.
Download ZIP
Why color scale return value not be hexadecimal?
Raw
.block
license: mit
height: 600
Raw
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<style>
body {
padding: 10px;
}
</style>
</head>
<body>
<script>
if(!Function.heredoc) Function.prototype.heredoc = function(){
return this.toString().match(/(?:\/\*(?:[\s\S]*?)\*\/)/).pop().replace(/^\/\*/, "").replace(/\*\/$/, "");
}
var doc = (function () {/*
ver.3まではレンジにカラーを指定した場合、hexで返ってきた。
```js
D3 ver.3
> var colorScale = d3.scaleLinear().domain([0, 100]).range(["#cccccc", "#ff0000"])
> colorScale(20)
<- "#d6a3a3"
```
ver.4 では、rgb形式の文字列で返ってくる。
```js
D3 ver.4
> var colorScale = d3.scaleLinear().domain([0, 100]).range(["#cccccc", "#ff0000"])
> colorScale(20)
<- "rgb(214, 163, 163)"
```
どうやら、hexに変換するようなメソッドも無いっぽい。
```js
> var c = colorScale(20)
> d3.color(c).toString()
<- "rgb(214, 163, 163)"
```
D3のスケールを他のライブラリと組みわせて使いたい時に、相手のライブラリがhexでのカラー指定しか受け取れない場合があるので、とりあえず、hexに変換するメソッドを追加して対応してみた。
```
> d3.color.prototype.toHex = function(){ return ["#", this.r.toString(16), this.g.toString(16), this.b.toString(16) ].join("") ; }
> d3.color(c).toHex()
<- "#d6a3a3"
```
*/}).heredoc();
var md = marked(doc);
d3.select("body").html(md);
d3.selectAll("body pre").each(function() {
hljs.highlightBlock(this, this.className);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment