Select nodes and childrens by search javascript function (RegExp) in a treemap graph

[pi...@ird.fr]

Dear all, 
I use protovis library and echarts library to produce treemaps. 
In protovis we have a search function to select nodes by a search. 

I would like to do the same for treemps in echarts. 

Could you help me ? 

You can see and use the search here (go under the treemap) : 
[ https://beep.ird.fr/acces/SOURIS-19.htm | https://beep.ird.fr/acces/SOURIS-19.htm ] 

Best regards 

Pier Luigi ROSSI 
IRD 

The code is in the source of htm file ( [ https://beep.ird.fr/acces/SOURIS-19.htm | https://beep.ird.fr/acces/SOURIS-19.htm ] ) 

Re: Select nodes and childrens by search javascript function (RegExp) in a treemap graph

[pi...@ird.fr]

Hi Ovilia, 

many thanks for your mail. 
I am not a javascript specialist ... (I juste "copy" and "paste" :-]) 

But suppose that you have the code as is in echarts manual. (see below). 

It exist many "orange" entries. 

How can I have a search zone like this : 
<div id="footer"> 
<label for="search">search: </label> 
<input type="text" id="search" onkeyup="update(this.value)"> 
</div> 

and a function like this : 
/** Updates the visualization and count when a new query is entered. */ 
function update(query) { 
if (query != re) { 
re = new RegExp(query, "i"); 
count(); 
vis.render(); 
} 

and when I write "orange" in search zone 
the fonction update search (with RegEx or other solution) the chain "orange" for all nodes and 
show more or less brilliant the nodes that contain "orange" as name. 

Best regards 

Pier Luigi 




option = { 
series: { 
type: "treemap", 
data: [{ 
name: "Food", 
children: [{ 
value: 3, 
name: "Fruit", 
children: [{ 
value: 1, 
name: "Apple" 
}, { 
value: 2, 
name: "Orange", 
children: [{ 
name: "Seville Orange", 
value: 1 
}, { 
name: "Blood Orange", 
value: 1 
}] 
}] 
}, { 
value: 9, 
name: "Meat", 
children: [{ 
value: 6, 
name: "Beaf", 
children: [{ 
name: "Sirloin", 
value: 1 
}, { 
name: "Rib", 
value: 1 
}, { 
name: "Chuck", 
value: 1 
}, { 
name: "Shank", 
value: 1 
}] 
}, { 
value: 2, 
name: "Chicken", 
children: [{ 
name: "Wings", 
value: 1 
}] 
}, { 
name: "Breast", 
value: 1 
}] 
}], 
visibleMin: 0 
}, { 
value: 6, 
name: "Drinks", 
children: [{ 
value: 3, 
name: "Wine", 
children: [{ 
name: "USA", 
value: 2 
}, { 
name: "Europe", 
children: [{ 
name: "Germany", 
value: 1 
}] 
}] 
}, { 
name: "Soft Drink", 
children: [{ 
value: 3, 
name: "Juice", 
children: [{ 
name: "Apple Juice", 
value: 1 
}, { 
name: "Orange Juice", 
value: 2 
}] 
}] 
}] 
}, { 
value: 6, 
name: "Fashion", 
children: [{ 
name: "Clothing", 
children: [{ 
name: "Shirts", 
value: 1 
}, { 
name: "Jackets", 
value: 3, 
children: [{ 
name: "Men", 
value: 1 
}, { 
name: "Woman", 
value: 1 
}] 
}, { 
value: 2, 
name: "Coats", 
children: [{ 
name: "Men", 
value: 1 
}, { 
name: "Woman", 
value: 1 
}] 
}] 
}] 
}, { 
name: "Computers", 
children: [{ 
name: "Components", 
value: 4, 
children: [{ 
name: "Barebones", 
value: 1 
}, { 
value: 2, 
name: "External", 
children: [{ 
name: "Hard Drives", 
value: 2 
}] 
}, { 
name: "Monitors", 
value: 1 
}] 
}, { 
value: 3, 
name: "Other", 
children: [{ 
name: "USB", 
value: 1 
}, { 
name: "Cases" 
}, { 
name: "Sound Cards", 
value: 1 
}] 
}] 
}], 
levels: [{ 
childrenVisibleMin: 1.5 
}] 
} 
} 


De: "Ovilia" <ov...@gmail.com> 
À: "pier luigi rossi" <pi...@ird.fr> 
Cc: "dev" <de...@echarts.apache.org> 
Envoyé: Vendredi 10 Décembre 2021 10:07:35 
Objet: Re: Select nodes and childrens by search javascript function (RegExp) in a treemap graph 

Hi Pier, 

You can set the color of each block with [1] and on search text change, you should 
call `setOption` with the calculated color to update the chart. 

Thanks 

Ovilia 

[1] [ https://echarts.apache.org/zh/option.html#series-treemap.data.itemStyle | https://echarts.apache.org/zh/option.html#series-treemap.data.itemStyle ] 

Re: Select nodes and childrens by search javascript function (RegExp) in a treemap graph

[Ovilia <ov...@gmail.com>]

Hi Pier,

You can set the color of each block with [1] and on search text change, you
should
call `setOption` with the calculated color to update the chart.

Thanks

*Ovilia*

[1] https://echarts.apache.org/zh/option.html#series-treemap.data.itemStyle


On Fri, Dec 10, 2021 at 12:28 AM <pi...@ird.fr> wrote:

> Dear all,
> I use protovis library and echarts library to produce treemaps.
> In protovis we have a search function to select nodes by a search.
>
> I would like to do the same for treemps in echarts.
>
> Could you help me ?
>
> You can see and use the search here (go under the treemap) :
> [ https://beep.ird.fr/acces/SOURIS-19.htm |
> https://beep.ird.fr/acces/SOURIS-19.htm ]
>
> Best regards
>
> Pier Luigi ROSSI
> IRD
>
> The code is in the source of htm file ( [
> https://beep.ird.fr/acces/SOURIS-19.htm |
> https://beep.ird.fr/acces/SOURIS-19.htm ] )
>
>
>
>
>
>
>
>