1. 首頁
  2. 問答
  3. 如何在javascript中創建一個散景顏色映射器？

如何在javascript中創建一個散景顏色映射器？

2017-10-12 75 views
0

我願做以下的Python相當於單機BokehJS如何在javascript中創建一個散景顏色映射器？

color_mapper = bokeh.models.mappers.LogColorMapper('Viridis256',low=vmin,high=vmax)

我該怎麼辦呢？位於JavaScript CDN文件中的顏色映射器在哪裏？ 他們似乎並不在這裏，例如：

https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.7.js

而不是在這裏或者：

https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.7.js

我試圖按照實例這樣的：

https://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html#minimal-complete-example

謝謝提前

來源

2017-10-12 Aaron Watters

回答

1

閱讀Bokeh文檔和js源代碼後，這似乎與版本0.12.5

var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16});

我確實嘗試在下面的例子中得到一些理智的結果，但沒有太大的成功。也許你可以進一步改進這個代碼。這是基於python的源碼Updating color mapper in a bokeh plot with taptool 嘗試點擊按鈕「添加一些數據！」很多時候，更多的則10

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 
     <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.css" type="text/css"></script> 
     <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.js"></script> 
     <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.5.min.js"></script> 
    <title> by bokeh</title> 
</head> 
<body> 
<div> 
<div id="myplot" /> 
</div> 
<button onclick="addPoint()">Add some data!</button> 

<script type='text/javascript'>//<![CDATA[ 
// arrays to hold data 
var source = new Bokeh.ColumnDataSource({ 
    data: { x: [Math.random() * 10.0], y: [Math.random() * 10.0], humidity: [0, 10.0] } 
}); 
var color_mapper = new Bokeh.LogColorMapper({palette:'Viridis256', low:0, high:16}); 

// make the plot and add some tools 
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save"; 

var plot = Bokeh.Plotting.figure({title:'Example of Random data', tools: tools, height: 300, width: 300}); 

var pglyph = plot.patches({ field: "x" }, { field: "y" }, 
    { fill_color: { field: "humidity", transform: color_mapper}}, 
        { source: source, alpha: 1, line_width: 4}) 

var scatterData = plot.line({ field: "x" }, { field: "y" }, 
    { source: source, line_width: 10 }); 

// Show the plot, appending it to the end of the current 
// section of the document we are in. 
Bokeh.Plotting.show(plot, document.getElementById('myplot')); 

function addPoint() { 
    // The data can be added, but generally all fields must be the 
    // same length. 
    source.data.x.push(Math.random() * 10.0); 
    source.data.y.push(Math.random() * 10.0); 
    // Also, the DataSource object must be notified when it has changed. 
    source.trigger('change'); 
} 
//]]> 
</script> 
</body> 
</html>

來源

2017-10-13 00:29:49 svujic

相關問題

 相關問題